uniapp动画的爬坑之路---动画不生效

朱雀 2023-03-01 13:52 482阅读 0赞

uniapp官网案例  
动画不生效，动画事件必须写在view标签上 写在div无效

<view :animation="animationData" style="background:red;height:100rpx;width:100rpx"></view>

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()
        }
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，482人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp动画的爬坑之路---动画不生效

uniapp官网案例动画不生效，动画事件必须写在view标签上写在div无效 <view :animation="animationData" style="

朱雀/ 2023年03月01日 13:52/ 0 赞/ 483 阅读

相关【Flutter 实战】动画序列、共享动画、路由动画

![20200825071144392.png][] > 老孟导读：此篇文章是 Flutter 动画系列文章第四篇，本文介绍动画序列、共享动画、路由动画。动画序列

灰太狼/ 2022年11月30日 15:46/ 0 赞/ 217 阅读

相关 Android动画之translate(位移动画)

上一篇文章讲了 [Android][][的左右滑动切换][Android]，实现过程是非常简单，一些新手可能会向深入了了解Activity切换的原理，下面主要对左右滑动进行深

女爷i/ 2022年08月05日 02:39/ 0 赞/ 230 阅读

相关 Android动画之旅-Android动画总结

在上篇博客，我们使用Android属性动画和Scroller实现了[实现下拉式窗帘动画和上拉式抽屉动画][Link 1]，并从源码角度分析了Scroller的原理。还没有看的小

系统管理员/ 2022年07月29日 11:41/ 0 赞/ 181 阅读

相关 Android动画之旅-开篇动画简介

Duang~! Duang~!Duang~! 哈哈，亲爱的小伙伴们，看到上面这句话你有木有联想到什么呢？没错，之前成龙大哥代言的一个很火的洗发露广告词。为什么要用三个词来开启

淩亂°似流年/ 2022年07月28日 09:24/ 0 赞/ 120 阅读

相关 Android动画之布局动画

Android动画之布局动画布局动画是针对于ViewGroup使用的，我们直接上效果，通过效果分析进行实现。 ![这里写图片描述][20160513162019257

╰半橙微兮°/ 2022年07月24日 05:04/ 0 赞/ 190 阅读

相关 Android动画之视图动画和属性动画

Android 动画分为两大类，分别是视图动画（View Animation）和属性动画（Property Animation）。对于这两种动画，都能够使用xml和代码的形式定

骑猪看日落/ 2022年07月24日 05:03/ 0 赞/ 249 阅读

相关用Scrapy爬动画列表

数据来源： [番组计划][Link 1] [动漫花园][Link 2] 爬动漫花园的话要设置`ROBOTSTXT_OBEY = False` items.py

柔情只为你懂/ 2022年06月07日 00:49/ 0 赞/ 118 阅读

相关 iOS动画实战之Lottie动画

介绍如果你还不知道Lottie是什么, 那你真的out了. 如果把iOS动画分为两类: 交互式动画, 播放式动画, 那么其中的播放动画完全可以使用Lottie来完成,

一时失言乱红尘/ 2022年05月19日 01:13/ 0 赞/ 270 阅读

相关 uniapp 使用css3动画库

1、在style中引入animate.css 2、在元素标签内 class="animated 动画名" 代码示例: <temp

朱雀/ 2021年07月24日 14:22/ 0 赞/ 1216 阅读