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

朱雀 2023-03-01 13:52 531阅读 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 条评论，531人围观）

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

相关阅读

相关 wxml2canvas爬坑之路

效果图： ![7444408e02ba04872eeb157322d698d9.png][] 前提：公司要求生成一分报告并转为图片并保存，之前用canvas画过，但这次

﹏ヽ暗。殇╰゛Y/ 2024年03月16日 17:42/ 0 赞/ 42 阅读

相关 vue 爬坑之路 - 路由重定向

vue新手，本文纯属自己摸索出来的，如有错误，请指正，感谢感谢。问题： http://localhost/dist/productInfo/1 跳转 http://l

偏执的太偏执、/ 2023年06月30日 09:15/ 0 赞/ 27 阅读

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

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

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

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

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

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

相关 Qt学习之路之QMovie动画

QMovie类是一个很方便的类，用于播放动画。在刷新页面的时候，可以尝试用QMovie 来实现等待界面。 QMovie类用于显示简单的动画，没有声音。首先，通过将一个文件

朱雀/ 2022年08月07日 12:43/ 0 赞/ 1 阅读

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

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

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

相关 Android动画之布局动画

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

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

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

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

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

相关用Scrapy爬动画列表

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

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

相关 iOS动画实战之Lottie动画

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

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