微信小程序动画无限循环掉花

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

动画效果

源码

 <!-- 动画 --><block wx:if="{{donghua}}"><view class='donghua'><image bindtap='hua' style='left:{{left1}}px' animation="{{animationData1}}" class='love' src='../../img/1.jpg'></image><image bindtap='hua' style='left:{{left2}}px' animation="{{animationData2}}" class='love' src='../../img/1.jpg'></image><image bindtap='hua' style='left:{{left3}}px' animation="{{animationData3}}" class='love' src='../../img/1.jpg'></image><image bindtap='hua' style='left:{{left4}}px' animation="{{animationData4}}" class='love' src='../../img/1.jpg'></image><image bindtap='hua' style='left:{{left5}}px' animation="{{animationData5}}" class='love' src='../../img/1.jpg'></image><image bindtap='hua' style='left:{{left6}}px' animation="{{animationData6}}" class='love' src='../../img/1.jpg'></image></view></block>

wxss


image{margin-top: -50rpx;width: 40rpx;height: 40rpx;margin-left: 5%;position: absolute;}

var animation = wx.createAnimation({})
var i = 1;
Page({data: {donghua: true,left1: Math.floor(Math.random() * 305 + 1),left2: Math.floor(Math.random() * 305 + 1),left3: Math.floor(Math.random() * 305 + 1),left4: Math.floor(Math.random() * 305 + 1),left5: Math.floor(Math.random() * 305 + 1),left6: Math.floor(Math.random() * 305 + 1),},onShow: function() {this.donghua()},donghua: function() {var that = this;setTimeout(function() {animation.translateY(604).step({duration: 2000})that.setData({["animationData" + i]: animation.export()})i++;}.bind(that), 200)if (i < 7) {setTimeout(function() {that.donghua()}.bind(that), 200)} else {i = 0; animation.translateY(-604).step({duration: 10})setTimeout(function() {for (var y = 0; y < 7; y++) {that.setData({["animationData" + y]: animation.export()})that.setData({["animationData" + y + '.actions[0].animates[0].args[0]']: 0})}}.bind(that), 2200)setTimeout(function() {that.donghua()}.bind(that), 2200)}}
})

微信小程序动画无限循环掉花相关推荐

[微信小程序]动画,从顶部掉花的效果(完整代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: image{ width: 100rpx;height: 100rpx;position: absol ...
微信小程序动画(七)：让页面动起来
本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式微信小程序动画(二):旋转微信小程序动画(三):缩放微信小程序动画(四):平移微信小程序 ...
微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容开发文档API–动画Animation 创建动 ...
微信小程序--动画animation
微信小程序--动画animation 一. 获取需要实现动画效果的元素 1. 微信小程序获取元素节点: 2. 合适的生命周期调用二.动画 1. 创建动画 2. 监听动画 3. 动画循环播放一. 获 ...
微信小程序动画之圆形进度条
微信小程序动画之圆形进度条上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
微信小程序关于for循环之后setData
微信小程序关于for循环之后setData Page({/*** 页面的初始数据*/data: {types: [],select: '',goods:[]},onLoad: function (op ...
微信小程序动画执行一次问题
微信小程序动画执行一次解决方法简单总结一下微信动画的实现及执行步骤(更新data使用的方式和vue一样直接this.data=""). const anim = wx.creat ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
微信小程序如何双重循环
微信小程序解决双重循环准备知识 wx:for : 使用数组中各项的数据重复渲染该组件当前项的下标变量名默认为 index,当前项的变量名默认为 item 可使用 wx:for-item 指定当前元 ...

微信小程序动画无限循环掉花

承接微信小程序开发。扫码加微信。

微信小程序动画无限循环掉花相关推荐

最新文章

热门文章

微信小程序动画无限循环 掉花

承接微信小程序开发。扫码加微信。

微信小程序动画无限循环 掉花相关推荐

最新文章

热门文章

微信小程序动画无限循环掉花

微信小程序动画无限循环掉花相关推荐