WXML

<view class="container">
<view class="page-body">
<view class="page-section"> <view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<scroll-view class="animation-buttons" scroll-y="true">
<button class="animation-button" bindtap="rotate">旋转</button>
<button class="animation-button" bindtap="scale">缩放</button>
<button class="animation-button" bindtap="translate">移动</button>
<button class="animation-button" bindtap="skew">倾斜</button>
<button class="animation-button" bindtap="rotateAndScale">旋转并缩放</button>
<button class="animation-button" bindtap="rotateThenScale">旋转后缩放</button>
<button class="animation-button" bindtap="all">同时展示全部</button>
<button class="animation-button" bindtap="allInQueue">顺序展示全部</button>
<button class="animation-button animation-button-reset" bindtap="reset">还原</button>
</scroll-view>
</view>
</view>
</view>

WXSS:

.animation-element-wrapper {
display: flex;
width: %;
padding-top: 150rpx;
padding-bottom: 150rpx;
justify-content: center;
overflow: hidden;
background-color: #ffffff;
}
.animation-element {
width: 200rpx;
height: 200rpx;
background-color: #1AAD19;
}
.animation-buttons {
padding: 30rpx 50rpx 10rpx;
width: %;
height: 600rpx;
box-sizing: border-box;
}
.animation-button {
float: left;
line-height: ;
width: 300rpx;
margin: 15rpx 12rpx;
} .animation-button-reset {
width: 620rpx;
}

JS:

Page({
onReady: function () {
this.animation = wx.createAnimation()
},
rotate: function () {
this.animation.rotate(Math.random() * - ).step()
this.setData({ animation: this.animation.export() })
},
scale: function () {
this.animation.scale(Math.random() * ).step()
this.setData({ animation: this.animation.export() })
},
translate: function () {
this.animation.translate(Math.random() * - , Math.random() * - ).step()
this.setData({ animation: this.animation.export() })
},
skew: function () {
this.animation.skew(Math.random() * , Math.random() * ).step()
this.setData({ animation: this.animation.export() })
},
rotateAndScale: function () {
this.animation.rotate(Math.random() * - )
.scale(Math.random() * )
.step()
this.setData({ animation: this.animation.export() })
},
rotateThenScale: function () {
this.animation.rotate(Math.random() * - ).step()
.scale(Math.random() * ).step()
this.setData({ animation: this.animation.export() })
},
all: function () {
this.animation.rotate(Math.random() * - )
.scale(Math.random() * )
.translate(Math.random() * - , Math.random() * - )
.skew(Math.random() * , Math.random() * )
.step()
this.setData({ animation: this.animation.export() })
},
allInQueue: function () {
this.animation.rotate(Math.random() * - ).step()
.scale(Math.random() * ).step()
.translate(Math.random() * - , Math.random() * - ).step()
.skew(Math.random() * , Math.random() * ).step()
this.setData({ animation: this.animation.export() })
},
reset: function () {
this.animation.rotate(, )
.scale()
.translate(, )
.skew(, )
.step({ duration: })
this.setData({ animation: this.animation.export() })
}
})

小程序animation动画效果(小程序组件案例)的更多相关文章

  1. 小程序animation动画效果综合应用案例(交流QQ群:604788754)

    如果案例有问题,可到QQ群找到今日相关压缩文件下载测试. WXML: <view class="cebian"> <view animation="{{ ...

  2. Android中xml设置Animation动画效果详解

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  3. android中设置Animation 动画效果

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  4. 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  5. 微信小程序Animation动画的使用

    目录 1,前言 2,属性 3,使用 1,前言 和css3动画不同,小程序中动画是主要是通过js控制的,简单来说就是创建一个动画实例animation.调用实例的方法来定义动画效果.最后通过动画实例的e ...

  6. 微信小程序的动画效果

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...

  7. 微信小程序animation动画2种方法

    这里介绍 2 种方法一种是常规的小程序方法操作,另一种是引入动画库 1. 常规动画操作设置 wxml: <view> <view bindtap="clickMe" ...

  8. android Animation 动画效果介绍

    Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动 ...

  9. ios animation 动画效果实现

    1.过渡动画 CATransition CATransition *animation = [CATransition animation]; [animation setDuration:1.0]; ...

随机推荐

  1. linux内核分析 1、2章读书笔记

    一.linux历史 20世纪60年代,MIT开发分时操作系统(Compatible TIme-Sharing System),支持30台终端访问主机: 1965年,Bell实验室.MIT.GE(通用电 ...

  2. Mysql数据库基础知识

    什么是Mysql数据库 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQ ...

  3. git如何获取用户名和邮箱

    答: git config user.name  (获取用户名)   git config user.email (获取邮箱)

  4. linux提示usb_serial_generic_write_bulk_callback - urb stoped: -32

    1.环境: 上位机:ubuntu16.04 Linux jello 4.4.0-89-generic #112-Ubuntu SMP Mon Jul 31 19:38:41 UTC 2017 x86_ ...

  5. 【集群搭建】Zookeeper集群环境配置

    1.下载解压安装文件 2.配置文件:conf/zoo.cfg tickTime=2000 dataDir=/usr/sunny/logs/zookeeper/data dataLogDir=/usr/ ...

  6. Windows下搭建FTP服务器

    一.什么是ftp? FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(A ...

  7. MYSQL语句:创建、授权、查询、修改、统计分析等 二 用户的创建、权限设置、删除

    接着上面一的内容 4.设置更改用户密码 命令格式:SET PASSWORD FOR 'username'@'host'=PASSWORD('newpassword'); 如果是当前登录用户用:SET ...

  8. codeforces 352 div 2 C.Recycling Bottles 贪心

    C. Recycling Bottles time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  9. hdu 5666 Segment 俄罗斯乘法或者套大数板子

    Segment Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem ...

  10. python 获取IP

    第一种 import commandscmd = "ifconfig br0 | grep 'inet addr' | sed 's/^.*addr://g' |sed 's/ Bcast: ...