Animation.rotate

解释：从原点顺时针旋转一个角度

方法参数

Number deg,deg的范围-180~180，从原点顺时针旋转一个 deg 角度。

示例

扫码体验

请使用百度APP扫码

图片示例

代码示例1

在开发者工具中预览效果

  1. <view class="wrap">    <view class="animation-element-wrapper">        <view class="animation-element" animation="{{animation}}"></view>    </view>    <view class="card-area">        <view class="top-description border-bottom">展示动画</view>        <button type="primary" bindtap="rotate">rotate</button>    </view></view>
  1. Page({    data:{ },    onReady() {      this.animation = swan.createAnimation({        transformOrigin: "50% 50%",        duration: 1000,        timingFunction: "ease",        delay: 0})    },    rotate() {      this.animation.rotate(Math.random() * 720 - 360).step()      this.setData({animation: this.animation.export()})    }});

代码示例2 - 开发者自定义showModal时可用于增加动画效果 ：

在开发者工具中预览效果

  1. <view class="wrap">    <button type="primary" bindtap="showModal" data-statu="open">点我打开自定义弹窗</button>      <!--mask-->      <view class="mask" bindtap="showModal" data-statu="close" s-if="{{showModalStatus}}"></view>      <!--content-->      <view animation="{{animationData}}" class="showModal-box" s-if="{{showModalStatus}}">      <view class="showModal-title">标题</view>      <view class="showModal-content">         <view class="border-bottom">可自定义展示接口请求返回的数据</view>       <view s-for="item, index in data" class="border-bottom">           <view>{{index}}</view>           <view>价钱：{{item.money}}</view>           <view>途径：{{item.source}}</view>           <view>类型：{{item.type}}</view>           <view>满减活动：{{item.upTo}}</view>        </view>    </view>      <view class="confirm" bindtap="showModal" data-statu="close">确定</view>      </view></view>
  1. Page({    data: {        showModalStatus: false,        data: {}    },    showModal(e) {        var currentStatu = e.currentTarget.dataset.statu;        this.animation(currentStatu);        this.request();    },    animation(currentStatu){        var animation = swan.createAnimation({            duration: 1000,              timingFunction: "ease",            delay: 0          });        animation.opacity(0).rotateX(-100).step();        this.setData({            animationData: animation.export()        })        setTimeout(function () {            animation.opacity(1).rotateX(0).step();            this.setData({                animationData: animation            })             if (currentStatu == "close") {                this.setData({showModalStatus: false});            }        }.bind(this), 200)        if (currentStatu == "open") {            this.setData({showModalStatus: true});        }    },    request() {        swan.request({            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',            header: {                'content-type': 'application/json'            },            method: 'POST',            dataType: 'json',            responseType: 'text',            data: {                key: 'value'            },            success: res => {                this.setData({                    data: res.data.data.couponList                })            },            fail: err => {                console.log('错误码：' + err.errCode);                console.log('错误信息：' + err.errMsg);            }        });    }})