uniapp 图片动画
时间: 2023-06-24 18:02:53 浏览: 80
你可以使用uniapp中的animation组件实现图片动画。以下是一个简单的示例代码:
```
<template>
<view class="container">
<image class="ball" :src="ballSrc" :animation="ballAnimation"></image>
</view>
</template>
<script>
export default {
data() {
return {
ballSrc: '/static/ball.png', // 图片地址
ballAnimation: null // 动画对象
}
},
mounted() {
// 创建动画对象
this.ballAnimation = uni.createAnimation({
duration: 1000, // 动画持续时间
timingFunction: 'ease-out' // 缓动函数
})
},
methods: {
startAnimation() {
// 开始动画
this.ballAnimation.rotate(360).step()
this.$set(this, 'ballAnimation', this.ballAnimation.export())
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ball {
width: 100px;
height: 100px;
transform-origin: center center;
}
</style>
```
在上面的代码中,我们使用了`uni.createAnimation()`方法创建了一个动画对象。然后,在`startAnimation()`方法中,我们对动画对象调用了`rotate()`方法,设置了旋转的角度,并使用`step()`方法结束了这一帧的动画。最后,我们使用`export()`方法把动画对象导出,并通过`$set()`方法更新了组件中的`ballAnimation`属性,让动画生效。
你可以根据自己的需求,修改动画的属性,实现不同的效果。