uni-app小程序uni.createAnimation动画效果快速上手教程


图片[1]-uni-app小程序uni.createAnimation动画效果快速上手教程-紫苑网络

建立动画

建立动画有2个方式,为了学习就简单点:

1.直接在点击的行数中去建立(如果一个界面只有一个动画那就随意);

2.onShow函数周期里面事先建立一个动画(推举)

// 生命周期,页面打开提前渲染
        onShow: function(){
            // 初始化一个动画
            var animation = uni.createAnimation({
                // 动画时间
                duration: 1000,
                // 动画速度
                timingFunction: 'linear',
            })
            // 存在return<a href="https://cizy.cn/tag/ziduan" title="【查看含有[字段]标签的文章】" target="_blank">字段</a>中
            this.animation = animation
        },

timingFunction有效值

图片[2]-uni-app小程序uni.createAnimation动画效果快速上手教程-紫苑网络

设置字段

字段里面我们需要存2个东西,一个是我们建立好的animation,另外一个触发动画的开关,例如我们开灯的感觉需要一个开关控制

animationData: {},
open: false

绑定动画

view画一个矩形,随后绑定我们的animation动画和一个点击函数

<view class="op" :animation="animationData" @tap="openTap()"></view>

触发函数

点击矩形之后我们判断布尔值是flase还是true来执行相对于动画效果
openTap() {
        console.log(this.open)
        if (this.open == false ) {
          this.open = true;
                  // 定义动画内容
                  this.animation.height(100).step(),
                  // 导出动画数据传递给data层
                  this.animationData = this.animation.export()
         } else {
               this.open = false;
                   this.animation.height(30).step()
                   this.animationData = this.animation.export()
                }
            },
 

总结和注意

1.动画效果需创建和绑定

2.动画效果就和一个布尔值来操控

3.animation对象的方法列表可以阅读:(https://uniapp.dcloud.io/api/ui/animation?id=createanimation

4.animation对象中的height,width之类是px为单位我们在输入时候需要在upx像素之间换算(2upx = 1px)

图片[3]-uni-app小程序uni.createAnimation动画效果快速上手教程-紫苑网络

5.必要存在动画传递发给data层

this.animationData = this.animation.export()

案例代码

<template>
    <view class="op" :animation="animationData" @tap="openTap()"></view>
</template>
​
<script>
    export default{
        data() {
            return{
                animationData: {},
                open: false
            }
        },
    // 生命周期,页面打开提前渲染
        onShow: function(){
            // 初始化一个动画
            var animation = uni.createAnimation({
        // 动画时间
                duration: 1000,
        // 动画速度
                timingFunction: 'linear',
            })
      // 存在return字段中
            this.animation = animation
        },
        methods:{
            openTap() {
        console.log(this.open)
                if (this.open == false ) {
          this.open = true;
                  // 定义动画内容
                  this.animation.height(100).step(),
                  // 导出动画数据传递给data层
                  this.animationData = this.animation.export()
                } else {
          this.open = false;
                   this.animation.height(30).step()
                   this.animationData = this.animation.export()
                }
            },
​
        }
    }
</script>
<style>
  .op{
    width: 100rpx;
    height: 60rpx;
    background-color: #007AFF;
    margin: 100rpx auto;
​
  }
</style>

 

© 版权声明
THE END
喜欢就支持一下吧
点赞10赞赏
分享
评论 抢沙发