animation动画实例

末蓝、 2021-12-14 05:23 334阅读 0赞

<template>
    	<view>
    		<page-head :title="title"></page-head>
    		<view class="uni-padding-wrap uni-common-mt">
    			<view class="animation-element-wrapper">
    				<view class="animation-element" :animation="animationData"></view>
    			</view>
    			<scroll-view class="animation-buttons" scroll-y="true">
    				<button class="animation-button" @tap="rotate">旋转</button>
    				<button class="animation-button" @tap="scale">缩放</button>
    				<button class="animation-button" @tap="translate">移动</button>
    				<button class="animation-button" @tap="skew">倾斜</button>
    				<button class="animation-button" @tap="rotateAndScale">旋转并缩放</button>
    				<button class="animation-button" @tap="rotateThenScale">旋转后缩放</button>
    				<button class="animation-button" @tap="all">同时展示全部</button>
    				<button class="animation-button" @tap="allInQueue">顺序展示全部</button>
    				<button class="animation-button animation-button-reset" @tap="reset">还原</button>
    			</scroll-view>
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				title: 'createAnimation',
    				animationData: ''
    			}
    		},
    		onUnload(){
    			this.animationData = ''
    		},
    		onLoad() {
    			this.animation = uni.createAnimation()
    		},
    		methods: {
    			rotate: function () {
    				this.animation.rotate(Math.random() * 720 - 360).step()
    				this.animationData = this.animation.export()
    			},
    			scale: function () {
    				this.animation.scale(Math.random() * 2).step()
    				this.animationData = this.animation.export()
    			},
    			translate: function () {
    				this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    				this.animationData = this.animation.export()
    			},
    			skew: function () {
    				this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    				this.animationData = this.animation.export()
    			},
    			rotateAndScale: function () {
    				this.animation.rotate(Math.random() * 720 - 360)
    					.scale(Math.random() * 2)
    					.step()
    				this.animationData = this.animation.export()
    			},
    			rotateThenScale: function () {
    				this.animation.rotate(Math.random() * 720 - 360).step()
    					.scale(Math.random() * 2).step()
    				this.animationData = this.animation.export()
    			},
    			all: function () {
    				this.animation.rotate(Math.random() * 720 - 360)
    					.scale(Math.random() * 2)
    					.translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
    					.skew(Math.random() * 90, Math.random() * 90)
    					.step()
    				this.animationData = this.animation.export()
    			},
    			allInQueue: function () {
    				this.animation.rotate(Math.random() * 720 - 360).step()
    					.scale(Math.random() * 2).step()
    					.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    					.skew(Math.random() * 90, Math.random() * 90).step()
    				this.animationData = this.animation.export()
    			},
    			reset: function () {
    				this.animation.rotate(0, 0)
    					.scale(1)
    					.translate(0, 0)
    					.skew(0, 0)
    					.step({
    						duration: 0
    					})
    				this.animationData = this.animation.export()
    			}
    		}
    	}
    </script>
    
    <style>
    	.animation-element-wrapper {
    		display: flex;
    		width: 100%;
    		padding-top: 150upx;
    		padding-bottom: 150upx;
    		justify-content: center;
    		overflow: hidden;
    		background-color: #ffffff;
    	}
    
    	.animation-element {
    		width: 200upx;
    		height: 200upx;
    		background-color: #1AAD19;
    	}
    
    	.animation-buttons {
    		padding:30upx 0;
    		width: 100%;
    		height: 360upx;
    	}
    
    	.animation-button {
    		float: left;
    		line-height: 2;
    		width: 44%;
    		margin: 15upx 3%;
    	}
    
    	.animation-button-reset {
    		width: 94%;
    	}
    </style>

### [uni.createAnimation(OBJECT)][uni.createAnimation_OBJECT] ###

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

**注意: export 方法每次调用后会清掉之前的动画操作**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70][]

var animation = uni.createAnimation(\{

transformOrigin: "50% 50%",

duration: 1000,

timingFunction: "ease",

delay: 0

\})

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70 4][]

示例：

export default{
      data: {
        animationData: {}
      },
      onShow: function(){
        var animation = uni.createAnimation({
          duration: 1000,
            timingFunction: 'ease',
        })
    
        this.animation = animation
    
        animation.scale(2,2).rotate(45).step()
    
        this.animationData = animation.export()
    
        setTimeout(function() {
          animation.translate(30).step()
          this.animationData = animation.export()
        }.bind(this), 1000)
      },
      methods:{
        rotateAndScale: function () {
          // 旋转同时放大
          this.animation.rotate(45).scale(2, 2).step()
          this.animationData = this.animation.export()
        },
        rotateThenScale: function () {
          // 先旋转后放大
          this.animation.rotate(45).step()
          this.animation.scale(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()
        }
      }
    }

[uni.createAnimation_OBJECT]: https://uniapp.dcloud.io/api/ui/animation?id=createanimation
[animation]: https://uniapp.dcloud.io/api/ui/animation?id=animation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70]: /images/20211213/7f40b915717440f7a4846e6522ba63d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70 1]: /images/20211213/d188cd0592a94626b885ff9b28a09e08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70 2]: /images/20211213/f99f5665bc8d4d61a44660a96bc59184.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70 3]: /images/20211213/0d8146cfac9745ed999e96a3f59c2e6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fcWlhbmdl_size_16_color_FFFFFF_t_70 4]: /images/20211213/c9aea355e1dc4ad48fc6122dcb853511.png