解决抖音爱心动画实现

项目场景：

项目场景：通过进入app首页显示一个满屏的视频列表功能，类似于抖音的效果

---

问题描述：

单次点击的时候切换暂停/播放状态，连续多次点击每次在点击位置出现一个爱心，随机旋转一个角度，爱心先放大再变透明消失。

---

原因分析：

1. 要求判断点击手势效果
2. 单次点击的时候切换暂停/播放状态
3. 连续多次点击每次在点击位置出现一个爱心并且随机旋转一个角度
4. 爱心先放大再变透明消失。
   

---

解决方案：

//在相关页面引用即可
 const [heartList, setHeartList] = React.useState<HeartData[]>([]); //点赞位置储存

   const _removeHeartView = React.useCallback((index) => {
      setHeartList((list) => list.filter((item, i) => index !== i));
    }, []);

  {heartList.map(({x, y, key}, index) => {
          return (
            //引用点赞
            <AnimatedHeartView
              x={x}
              y={y}
              key={key}
              onAnimFinished={() => _removeHeartView(index)}
            />
          );
        })}

/**
 * 点赞动画
 *
 * @author ethanlee
 */
import React from 'react';
import { Animated, ViewProps } from 'react-native';

export interface AnimatedHeartProps extends ViewProps {
  x: number;
  y: number;
  onAnimFinished: Function;
}

const AnimatedHeartView = React.memo(
  (props: AnimatedHeartProps) => {
    // [-25, 25]随机一个角度
    const rotateAngle = `${Math.round(Math.random() * 50 - 25)}deg`;
    const animValue = React.useRef(new Animated.Value(0)).current;

    React.useEffect(() => {
      Animated.sequence([
        Animated.spring(animValue, {
          toValue: 1,
          useNativeDriver: true,
          bounciness: 5,
        }),
        Animated.timing(animValue, {
          toValue: 2,
          useNativeDriver: true,
        }),
      ]).start(() => {
        props.onAnimFinished();
      });
    }, [animValue, props]);

    return (
      <Animated.Image
        style={{
          position: 'absolute',
          width: 108,
          height: 126,
          top: props.y - 100,
          left: props.x - 54,
          opacity: animValue.interpolate({
            inputRange: [0, 1, 2],
            outputRange: [1, 1, 0],
          }),
          transform: [
            {
              scale: animValue.interpolate({
                inputRange: [0, 1, 2],
                outputRange: [1.5, 1.0, 2],
              }),
            },
            {   
              rotate: rotateAngle,
            },
          ],
        }}
        source={require('./img/heart.png')}//此处为爱心图片
      />
    );
  },
  () => true,
);

export default AnimatedHeartView;