uniapp 动画的实现

最新推荐文章于 2024-05-06 14:19:58 发布

菜鸟驿站2020

最新推荐文章于 2024-05-06 14:19:58 发布

阅读量4.3k

点赞数 1

分类专栏： uni-app 文章标签：动画前端

本文链接：https://blog.csdn.net/weixin_38946164/article/details/125654813

版权

uni-app 专栏收录该内容

59 篇文章 34 订阅

订阅专栏

效果图：

在这里插入图片描述

官方文档

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

<template>
	<view>
		<view class="ani" :animation="animationData" @click="rotateThenScale"></view>
		<view class="love" :animation="animationData1">
			<image src="../../static/love.png" ></image>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animation:'',
				animationData: {},
				animationData1: {}
			}
		},
		onShow: function() {
			var animation = uni.createAnimation({				
				duration: 1000,
				timingFunction: 'ease'				
			})
			this.animation = animation
		
			setTimeout(() => {
				//放大4倍，旋转45度
				animation.scale(4, 4).rotate(45).step()
				this.animationData = animation.export()
			},1000)

			setTimeout(() => {
				//translate 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。
				animation.translate(84,26).step()
				this.animationData = animation.export()				
			}, 2000)
			
			/* 心跳效果 */
			var animation1 = uni.createAnimation({
				duration: 450,
				timingFunction: 'linear',
				delay: 1			
			})
			var next = true
			setInterval(() => {
				if (next) {
					animation1.scale(1.15).step() 
				} else {
					animation1.scale(0.85).step()
				}
				next = !next;
				this.animationData1 = animation1.export()
			}, 500)
		},
		
		methods: {			
			rotateAndScale: function() {
				// 旋转同时缩小
				this.animation.rotate(90).scale(0.5, 0.5).step()
				this.animationData = this.animation.export()
			},
			rotateThenScale: function() {
				// 先旋转后放大
				this.animation.rotateZ(45).step()
				this.animation.scaleX(2, 2).step()
				this.animationData = this.animation.export()
			},
			rotateAndScaleThenTranslate: function() {
				// 先旋转同时放大，然后平移
				this.animation.rotate(45).scale(2, 2).step()
				this.animation.translate(100, 100).step({
					duration: 1000
				})
				this.animationData = this.animation.export()
			}
			
		}
	}
</script>

<style>
	.ani{
		background:red;
		height:100rpx;
		width:100rpx;
	}
	
	.love{		
		height:200rpx;
		width:200rpx;
		margin-left: 360rpx;
	}
	image{
		height:200rpx;
		width:200rpx;
	}


</style>