标签：动画 createAnimation app animation export animationData uni open

在实现某个功能的时候，因为基础不够只能拆分2个步骤来学习，第一个学习uni-app小程序uni.createAnimation动画效果，第二个在思考在这基础上实现某个功能，于是…..

写了3小时，出了3个bug

建立动画

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

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

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

// 生命周期,页面打开提前渲染
        onShow: function(){
            // 初始化一个动画
            var animation = uni.createAnimation({
                // 动画时间
                duration: 1000,
                // 动画速度
                timingFunction: 'linear',
            })
            // 存在return字段中
            this.animation = animation
        },

timingFunction有效

设置字段

字段里面我们需要存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）

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>

 

       

标签：动画,createAnimation,app,animation,export,animationData,uni,open
来源： https://www.cnblogs.com/ericyuan/p/16172669.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。