小程序动画animation左右移动效果

wxml

    <view animation="{{animation}}" style="position: absolute"><image src="/images/background.png" alt="" class="background"></image></view>

因为小程序边框所限，所以最外层的view应该设置宽度大一点，我设置的是2000px

js

  onLoad() {//动画this.animation = wx.createAnimation({duration: 7000,timingFunction: 'linear',delay: 0})this.animation.translate(-680, -1).step()this.animation.translate(0, -1).step()this.setData({animation: this.animation.export()   //输出动画  })setInterval(function () {this.animation.translate(-680, -1).step()this.animation.translate(0, -1).step()this.setData({animation: this.animation.export()   //输出动画  })}.bind(this),14000)},

Page({data: {animation:{}},

设置两遍translate，不然呢setInterval一开始的那一次不会产生效果，评论有什么好方法嘛？
效果

小程序动画animation左右移动效果相关推荐

小程序动画animation向左移动效果
今天在家做一个私活,效果类似于淘宝的筛选功能,微信小程序商品筛选,侧方弹出动画选择页面,研究了一下小程序的动画相关的文档,于是又get到了一个新的小程序技能,小程序动画animation向左移动效果. ...
微信小程序--动画animation
微信小程序--动画animation 一. 获取需要实现动画效果的元素 1. 微信小程序获取元素节点: 2. 合适的生命周期调用二.动画 1. 创建动画 2. 监听动画 3. 动画循环播放一. 获 ...
微信小程序动画 animation 实现轮播
目录一场景二思路三实现总结: 一场景需要实现小程序的轮播图.目标如下要求:图片数量可变(最少3个,最多不限),有动画效果效果预览: 二思路查看小程序api: 问题1,每一个a ...
小程序动画Animation，高度增加动画形式，图标旋转动画形式
<view class="serach-title serach-list" animation="{{animatheightadd}}" > ...
【小程序动画合集】10种小程序动画效果实现方法，文章太长建议收藏！
前言一提小程序与动画,首先想到的是什么?嗯,微信小程序独创了一套动画玩法,官方支持3种动画方案,分别是 createAnimation . this.animate 和 CSS3动画 . 1. cr ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
微信小程序动画(七)：让页面动起来
本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式微信小程序动画(二):旋转微信小程序动画(三):缩放微信小程序动画(四):平移微信小程序 ...
微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容开发文档API–动画Animation 创建动 ...
微信小程序动画解析以及transitionend重复 animationiteration animationend失效问题解析
github项目代码 github项目代码 https://github.com/MrITzhongzi/small_routine_components/tree/master/5.danmu_co ...

小程序动画animation左右移动效果

wxml

js

小程序动画animation左右移动效果相关推荐

最新文章

热门文章