Animation.rotate

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

方法参数

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

示例

扫码体验

Animation.rotate - 图1请使用百度APP扫码

图片示例

Animation.rotate - 图2

Animation.rotate - 图3

Animation.rotate - 图4

代码示例1

在开发者工具中预览效果

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

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

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <button type="primary" bindtap="showModal" data-statu="open">点我打开自定义弹窗</button>  
  3.     <!--mask-->  
  4.     <view class="mask" bindtap="showModal" data-statu="close" s-if="{{showModalStatus}}"></view>  
  5.     <!--content-->  
  6.     <view animation="{{animationData}}" class="showModal-box" s-if="{{showModalStatus}}">  
  7.     <view class="showModal-title">标题</view>  
  8.     <view class="showModal-content">  
  9.        <view class="border-bottom">可自定义展示接口请求返回的数据</view>
  10.        <view s-for="item, index in data" class="border-bottom">
  11.            <view>{{index}}</view>
  12.            <view>价钱：{{item.money}}</view>
  13.            <view>途径：{{item.source}}</view>
  14.            <view>类型：{{item.type}}</view>
  15.            <view>满减活动：{{item.upTo}}</view>
  16.         </view>
  17.     </view>  
  18.     <view class="confirm" bindtap="showModal" data-statu="close">确定</view>  
  19.     </view>
  20. </view>
  1. Page({
  2.     data: {
  3.         showModalStatus: false,
  4.         data: {}
  5.     },
  6.     showModal(e) {
  7.         var currentStatu = e.currentTarget.dataset.statu;
  8.         this.animation(currentStatu);
  9.         this.request();
  10.     },
  11.     animation(currentStatu){
  12.         var animation = swan.createAnimation({
  13.             duration: 1000,  
  14.             timingFunction: "ease",
  15.             delay: 0  
  16.         });
  17.         animation.opacity(0).rotateX(-100).step();
  18.         this.setData({
  19.             animationData: animation.export()
  20.         })
  21.         setTimeout(function () {
  22.             animation.opacity(1).rotateX(0).step();
  23.             this.setData({
  24.                 animationData: animation
  25.             }) 
  26.             if (currentStatu == "close") {
  27.                 this.setData({showModalStatus: false});
  28.             }
  29.         }.bind(this), 200)
  30.         if (currentStatu == "open") {
  31.             this.setData({showModalStatus: true});
  32.         }
  33.     },
  34.     request() {
  35.         swan.request({
  36.             url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
  37.             header: {
  38.                 'content-type': 'application/json'
  39.             },
  40.             method: 'POST',
  41.             dataType: 'json',
  42.             responseType: 'text',
  43.             data: {
  44.                 key: 'value'
  45.             },
  46.             success: res => {
  47.                 this.setData({
  48.                     data: res.data.data.couponList
  49.                 })
  50.             },
  51.             fail: err => {
  52.                 console.log('错误码：' + err.errCode);
  53.                 console.log('错误信息：' + err.errMsg);
  54.             }
  55.         });
  56.     }
  57. })