如何在React Native中实现按钮及视图组件的弹跳动画效果

通用动画实现方式 #

React Native 不支持Web端的CSS动画和webkit类前缀特性，官方及社区提供了两套主流的动画实现方案：

• 官方原生Animated API：轻量无依赖，支持时序、弹簧、衰变三类基础动画，可组合为并行、串行动画，支持属性插值，能覆盖绝大多数常规动画需求，性能最优。
• 社区增强库react-native-reanimated：适合复杂手势联动、高复杂度动画场景，将动画逻辑放到UI线程执行，避免JS线程阻塞导致的掉帧问题。

按钮/任意视图弹跳效果具体实现 #

你示例中CSS实现的是无限交替缩放的弹跳效果，用官方Animated API即可1:1还原，代码如下：

import React, { useRef, useEffect } from 'react';
import { View, StyleSheet, Animated, TouchableOpacity, Text } from 'react-native';

const BounceComponent = () => {
  // 初始化缩放动画初始值为1
  const scaleValue = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    // 循环执行动画，和CSS的0.3s无限交替效果完全对齐
    Animated.loop(
      Animated.sequence([
        // 300ms放大到1.2倍
        Animated.timing(scaleValue, {
          toValue: 1.2,
          duration: 300,
          useNativeDriver: true, // 开启原生驱动，动画更流畅
        }),
        // 300ms缩回原尺寸
        Animated.timing(scaleValue, {
          toValue: 1,
          duration: 300,
          useNativeDriver: true,
        })
      ])
    ).start();
  }, [scaleValue]);

  return (
    <TouchableOpacity activeOpacity={0.9}>
      {/* 将动画值绑定到transform的scale属性 */}
      <Animated.View style={[styles.bounceBox, {transform: [{scale: scaleValue}]}]}>
        <Text style={styles.text}>按钮</Text>
      </Animated.View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  bounceBox: {
    position: 'absolute',
    top: 50,
    left: 50,
    width: 75,
    height: 75,
    borderRadius: 37.5,
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    color: '#fff',
    fontSize: 14
  }
});

export default BounceComponent;

注意事项 #

• 需要应用动画的组件必须使用Animated前缀的封装组件，例如Animated.View、Animated.Text，自定义组件可以通过Animated.createAnimatedComponent(自定义组件)包装后使用。
• 该实现逻辑对小尺寸按钮、大尺寸视图完全通用，仅需调整样式即可适配不同组件。
• 如果需要更真实的物理弹跳效果，可以将Animated.timing替换为Animated.spring，调整bounciness、speed参数即可定制弹跳的弹性和速度。

内容的提问来源于stack exchange，提问作者Lê Quốc Khánh