项目场景:
项目场景:通过进入app首页显示一个满屏的视频列表功能,类似于抖音的效果
问题描述:
单次点击的时候切换暂停/播放状态,连续多次点击每次在点击位置出现一个爱心,随机旋转一个角度,爱心先放大再变透明消失。
原因分析:
- 要求判断点击手势效果
- 单次点击的时候切换暂停/播放状态
- 连续多次点击每次在点击位置出现一个爱心并且随机旋转一个角度
- 爱心先放大再变透明消失。
解决方案:
//在相关页面引用即可
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)}
/>
);
})}
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) => {
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;