文档章节

微信小程序animation循环动画效果--让云朵飘

第九程序
 第九程序
发布于 2017/07/14 11:22
字数 718
阅读 42
收藏 0
点赞 0
评论 0

微信小程序提供了实现动画的api——animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环。说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但’setInterval’在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所决定的(具体可以搜本关资料看),所以动画间隙并不是那么流畅,所以先玩玩吧,让我们来实现让云朵飘……

截图如下:

让云朵飘 
实现代码:

index.wxml

<view class="clouds">
      <image animation="{{animationCloudData}}"  class="yun1" src="../../img/yun1.png"></image>
    </view>

index.js

  onReady: function () {
    // 页面渲染完成
    // 实例化一个动画
    var that = this;
    var i = 0
    var ii = 0

    var animationData = wx.createAnimation({
      duration: 1000, // 默认为400     动画持续时间,单位ms
      timingFunction: 'ease-in-out',
      //transformOrigin: '4px 91px'
    });

    var animationCloudData = wx.createAnimation({
      duration: 1000, // 默认为400     动画持续时间,单位ms
      timingFunction: 'ease-in-out',
      //transformOrigin: '4px 91px'
    });

    // 顺序执行,当已经执行完上面的代码就会开启定时器
    // 循环执行代码
    //dotAnFun = setInterval(function () {});    
    /*setInterval(function () {
      // 动画脚本定义
      //animationData.rotate(6 * (++i)).step()
      //animationData.scale(2, 2).rotate(45).step().scale(1, 1).step();
      animationData.translateY(10).step({ duration: 500 }).translateY(-10).step({ duration: 500 });

      // 更新数据
      that.setData({
        // 导出动画示例
        animationData: animationData.export(),
        //animationCloudData: animationCloudData.export(),        
      })

      ++i;
      console.log(i);
    }.bind(that), 2000);//循环时间 这里1000是1秒
    */


    //动画的脚本定义必须每次都重新生成,不能放在循环外
    animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });

    // 更新数据
    that.setData({
      // 导出动画示例
      //animationData: animationData.export(),
      animationCloudData: animationCloudData.export(),
    })

    setInterval(function () {
      //动画的脚本定义必须每次都重新生成,不能放在循环外
      animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 });

      // 更新数据
      that.setData({
        // 导出动画示例
        //animationData: animationData.export(),
        animationCloudData: animationCloudData.export(),
      })
      ++ii;
      console.log(ii);

    }.bind(that),10000);//3000这里的设置如果小于动画step的持续时间的话会导致执行一半后出错

  }

index.wxss

.clouds{
  margin-top:320rpx; 
}
.yun1{
  width:320rpx;
  height: 120rpx;

}
附:参考备用:

/*
    var that = this;
    // 页面渲染完成
    //实例化一个动画
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(2, 2).rotate(45).step().scale(1,1).step();

    //导出动画
    this.setData({
      animationData: animation.export()
    })

    var i = 0;
    // 顺序执行,当已经执行完上面的代码就会开启定时器
    /*setTimeout(function () {
      that.setData({
        animationData: animation.export()
      });

      i++;
      console.log(i);
    }, 1000);*/

    /*setInterval(function () {
      //循环执行代码 
        that.setData({
          animationData: animation.export()
        });

      i++;
      console.log(i); 
    }, 1000) //循环时间 这里是1秒   

  }*/

© 著作权归作者所有

共有 人打赏支持
第九程序
粉丝 83
博文 142
码字总数 172691
作品 0
厦门
程序员
微信小程序登录页动画-云层漂浮

前言 2017年前端火了,微信小程序、weex、reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波。 上效果图(GI动态图) 微信小程序动画 当我看到这张背...

邵磊
2017/05/04
0
0
跨平台 canvas 绘图框架 - SpriteJS

SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库,可以基于 canvas 快速绘制结构化 UI 、动画和交互效果,并发布到任何拥有 canvas 环境的平台上(比如浏览器、小程序和 node )。 ...

welefen
06/20
0
0
憧憬Licoy/wepy-com-loadings

微信小程序Loading加载动画组件 基于Wepy开发的微信小程序loading加载动画组件 说明 安装 npm i wepy-com-loadings 使用 import wepy from 'wepy'import Loadings from "wepy-com-loadings"e...

憧憬Licoy
04/26
0
0
小程序scroll-view 实现大图滚动显示总结

有一张大图宽度较大, 一个屏幕展示不开, 需要自动滚动 scrollview显示 wxml

SuShine
04/19
0
0
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
01/25
644
2
透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度
01/26
0
0
浅谈微信小程序中的下拉刷新和上拉加载

下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 。而实现上拉加载相对来说就比较不方便了。 下拉刷新 虽然微信的官方文档有很多坑,但下拉刷新介绍的还...

02/05
0
0
618快要来临--家具大战一战即发

前言 今年是小程序很火的一年,所以最近在自学微信小程序,所以打算自己撸一个小程序出来,由于自己才刚刚自学不久。就做了一个相对简单的家具小程序。当然在这其中也遇到了一些问题和bug,在...

盏茶作酒 流苏如画
06/11
0
0
Promise.all 应用一例

在做小程序地图开发的时候,需要在地图上放置不同图标的 ,而这些图标又来自网络,恰恰由于微信小程序的限制,不支持网络图片作为 的 值 微信小程序文档 但注意到也支持临时路径这句话,则可...

lip2up
03/29
0
0
编程微刊第五期文章汇总(2018.5)

1. 推荐阅读 前端开发工作中如何快速成长和学习? 初中级前端开发工程师如何提升个人能力? 程序员如何利用空闲时间挣零花钱 来自一位00后程序员的成长历程 程序员如何打造个人技术影响力 2....

祈澈姑娘
05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何把你的Linux系统变的更加安全

做为一个小白,以为自己懂了点Linux知识,会搭建Linux各种服务就觉得自己牛的不要要的。在我们团队里面,我将使用了一台破电脑搭建Linux服务器,上面跑着Ftp服务存放着资源,ssh服务可以远程...

问题终结者
刚刚
0
0
lombok的使用和原理

一、项目背景 在写Java程序的时候经常会遇到如下情形: 新建了一个Class类,然后在其中设置了几个字段,最后还需要花费很多时间来建立getter和setter方法 lombok项目的产生就是为了省去我们手...

颖辉小居
刚刚
0
0
rsync至服务同步-系统日志-screen

rsync: 服务同步;配置文件:/etc/rsyncd.conf 默认端口:873 服务启动:rsync --daemon rsync -av /root/1.txt 192.168.1.2::test/2.txt (test为模块名称) /etc/rsync.conf配置样例: #指定...

ZHENG-JY
3分钟前
0
0
读取文件中内容转换成字符串

package com.lieni.ruyu.api.xmlTool; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.Unsuppo......

newdeng
3分钟前
0
0
《PHP和MySQL Web 开发》 第8章 设计Web数据库

LCL WARNING 这是我学习《PHP和MySQL Web 开发》的读书笔记,一些重要的知识点我会记录下来,当然只会写我觉得重要的。 如果有幸有人看到这个学习笔记了,你要结合着书看,不要光看这个笔记。...

十万猛虎下画山
10分钟前
0
0
Spring+jpaNo transactional EntityManager available

TransactionRequiredException: No transactional EntityManager availableEntityManager执行以下方法(refresh, persist, flush, joinTransaction, remove, merge) 都需要需要事务i......

wpfc
10分钟前
0
0
八幅漫画理解使用JSON Web Token设计单点登录系统

八幅漫画理解使用JSON Web Token设计单点登录系统 Sep 07, 2015 in Engineering 上次在《JSON Web Token - 在Web应用间安全地传递信息》中我提到了JSON Web Token可以用来设计单点登录系统。...

祖冲之
12分钟前
0
0
Spring框架中的设计模式(三)

Spring框架中的设计模式(三) 原创: 瑞查德-Jack 在之前的两篇文章中,我们看到了一些在Spring框架中实现的设计模式。这一次我们会发现这个流行框架使用的3种新模式。 本文将从描述两个创意...

瑞查德-Jack
16分钟前
1
0
[MicroPython]TPYBoard智能小车“飞奔的TPYBoard装甲一号”

智能小车作为现代的新发明,是以后的发展方向,他可以按照预先设定的模式在一个环境里自动的运作,不需要人为的管理,可应用于科学勘探等等的用途。智能小车能够实时显示时间、速度、里程,具...

bodasisiter
17分钟前
0
0
桌面虚拟化VDI(Virtual Desktop Infrastructure)

为了保证员工(客户)不把公司的资料复制、传输给别人。可以把员工平时办公放在服务器上做。所以使用桌面虚拟化。就是把一个服务器虚拟出很多桌面系统(如:windows)。 桌面虚拟化最大的优势...

王坤charlie
25分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部