首页 Uni-app 正文

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

2021-07-26 0 833

这个世界上很多人在扮演余春娇,也有很多人是张志明,只是没有他们的结局

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

在实现某个功能的时候,因为基础不够只能拆分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有效值

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)

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>

 

一位只想找富婆而不想努力的人

常见问题
  • 请访问星宿UI 官方文档
查看详情

相关文章

联系作者

为您解决烦忧 - 24小时在线 专业服务