import React from 'react'
import { StyleSheet, TouchableOpacity, Animated } from 'react-native'
export default function App ()
{
// 创建动画属性对象
let animatedWidth = new Animated.Value(50)
let animatedHeight = new Animated.Value(100)
// 点击动画
const animatedBox = () =>
{
Animated.timing(animatedWidth, {
toValue: 200, // 用于设置动画结束的值
duration: 1000, // 持续时间 时间为毫秒
useNativeDriver: false,
// easing 时间缓动曲线函数,默认为渐入渐出 Easing.inOut 别名 Easing.ease
}).start()
Animated.timing(animatedHeight, {
toValue: 500,
duration: 500,
delay: 100, // 持续时间
// isInteraction: true, // 次动画是否在 isInteractionManager 上创建 "交互句柄" 默认为true
useNativeDriver: false, // 是否使用原生动画来实现 默认为 false
}).start()
}
let animatedStyle = {
width: animatedWidth,
height: animatedHeight
}
return (
<TouchableOpacity style={styles.container} onPress={animatedBox}>
{/* // 设置样式属性 以及宽高 把动画后的宽高抽出来了 */}
<Animated.View style={[styles.box, animatedStyle]} />
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
box: {
backgroundColor: 'yellow',
width: 50,
height: 50
}
})
React Native-13:动画组件-Animated
最新推荐文章于 2024-05-12 09:47:50 发布