如何在“反应本土化”中制作震动图像动画？
如何在“反应本土化”中制作震动图像动画？
提问于 2018-12-12 23:33:41
当我按下TouchableOpacity.时，我想制作一个震颤的图像动画
到目前为止，我已经用下面的代码制作了一个动画图像：
const backgroundImage = require('./components/images/baby-sleep.jpg')
class App extends Component {
constructor(props) {
super(props)
this.animatedValue = new Animated.Value(0)
}
handleAnimation = () => {
Animated.timing(this.animatedValue, {
toValue: 1,
duration: 1000,
easing: Easing.ease
}).start()
}这是我在TouchableOpacity中调用TouchableOpacity的代码
<TouchableOpacity onPress={this.handleAnimation}>
<Text style={{fontSize: 24, fontWeight: 'bold'}}>Play</Text>
</TouchableOpacity>这是我制作动画图像的代码：
<Animated.Image
source={backgroundImage}
resizeMode='contain'
style={{
transform: [
{
translateX: this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 120]
})
},
{
translateY: this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 230]
})
},
{
scaleX: this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [1, 15]
})
},
{
scaleY: this.animatedValue.interpolate({
inputRange: [0, 9],
outputRange: [1, 150.5]
})
}
]
}}
/>当我按下TouchableOpacity，时，这段代码已经制作了一个动画，但是现在我真的不知道当我按下TouchableOpacity时，如何使图像抖动
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-13 09:16:15
你们真的很亲密。我将提供一个完整的例子，为一个单一的摆动旋转，然后你可以添加额外的动画，根据您的要求：
const backgroundImage = require('./components/images/baby-sleep.jpg')
class App extends Component {
constructor(props) {
super(props)
this.animatedValue = new Animated.Value(0)
}
handleAnimation = () => {
// A loop is needed for continuous animation
Animated.loop(
// Animation consists of a sequence of steps
Animated.sequence([
// start rotation in one direction (only half the time is needed)
Animated.timing(this.animatedValue, {toValue: 1.0, duration: 150, easing: Easing.linear, useNativeDriver: true}),
// rotate in other direction, to minimum value (= twice the duration of above)
Animated.timing(this.animatedValue, {toValue: -1.0, duration: 300, easing: Easing.linear, useNativeDriver: true}),
// return to begin position
Animated.timing(this.animatedValue, {toValue: 0.0, duration: 150, easing: Easing.linear, useNativeDriver: true})
])
).start();
}
}然后将此旋转添加到Image组件中：
<Animated.Image
source={backgroundImage}
resizeMode='contain'
style={{
transform: [{
rotate: this.animatedValue.interpolate({
inputRange: [-1, 1],
outputRange: ['-0.1rad', '0.1rad']
})
}]
}}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53752983
复制相关文章
相似问题
腾讯云开发者
