init

xhs-mini-demos/api-case/animation/animation.css

@@ -0,0 +1,38 @@
+
+.card-area {
+  overflow: hidden;
+  border-radius: 8px 8px;
+}
+
+.animation-element-wrapper {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  height: 200px;
+  margin: 10px 17px;
+  border-radius: 8px 8px;
+  background-color: #fff;
+}
+
+.animation-element {
+  width: 46px;
+  height: 46px;
+  margin-top: 54px;
+  margin-left: 124px;
+  background-color: #ff2442;
+}
+
+.flexBottom {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}
+
+.scroll {
+  height: 275px;
+}
+.animation-element2 {
+  width: 46px;
+  height: 46px;
+  background-color: #ff2442;
+}

xhs-mini-demos/api-case/animation/animation.js

@@ -0,0 +1,126 @@
+Page({
+  data: {
+    isIPhoneX: false,
+    animation: {},
+    animationData: {}
+  },
+  onLoad() {
+    this.animation = xhs.createAnimation({
+      duration: 1000,
+      timingFunction: 'ease',
+      delay: 0,
+      transformOrigin: '50% 50% 0',
+    });
+
+    this.animation2 = xhs.createAnimation({
+      timingFunction: 'linear',
+    });
+
+    this.scroll();
+  },
+  rotate() {
+    this.animation.rotate(Math.random() * 720 - 360).step();
+    this.setData({
+      animation: this.animation.export(),
+    });
+  },
+  scale() {
+    this.animation.scale(Math.random() * 2).step();
+    this.setData({
+      animation: this.animation.export(),
+    });
+  },
+  translate() {
+    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step();
+    this.setData({
+      animation: this.animation.export(),
+    });
+  },
+  skew() {
+    this.animation.skew(Math.random() * 90, Math.random() * 90).step();
+    this.setData({
+      animation: this.animation.export(),
+    });
+  },
+  rotateAndScale() {
+    this.animation
+      .rotate(Math.random() * 720 - 360)
+      .scale(Math.random() * 2)
+      .step();
+    this.setData({
+      animation: this.animation.export(),
+    });
+  },
+  rotateThenScale() {
+    this.animation
+      .rotate(Math.random() * 720 - 360)
+      .step()
+      .scale(Math.random() * 2)
+      .step();
+    this.setData({
+      animation: this.animation.export(),
+    });
+  },
+  all() {
+    this.animation
+      .rotate(Math.random() * 720 - 360)
+      .scale(Math.random() * 2)
+      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
+      .skew(Math.random() * 90, Math.random() * 90)
+      .step();
+    this.setData({
+      animation: this.animation.export(),
+    });
+  },
+  allInQueue() {
+    this.animation
+      .rotate(Math.random() * 720 - 360)
+      .step()
+      .scale(Math.random() * 2)
+      .step()
+      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
+      .step()
+      .skew(Math.random() * 90, Math.random() * 90)
+      .step();
+    this.setData({
+      animation: this.animation.export(),
+    });
+  },
+  reset() {
+    this.animation.rotate(0, 0).scale(1).translate(0, 0).skew(0, 0).step({
+      duration: 0,
+    });
+    this.setData({
+      animation: this.animation.export(),
+    });
+  },
+  scroll() {
+    this.animation.translateX(400).step({
+      duration: 0,
+    });
+
+    this.setData({
+      animationData: this.animation.export(),
+    });
+
+    setTimeout(() => {
+      this.animation.translateX(-700).step({
+        duration: 5000,
+        delay: 1,
+      });
+
+      const data = this.animation.export();
+
+      this.setData({
+        'animationData.commandSetQueue[0].translateX.rule.value': [-700],
+        'animationData.commandSetQueue[0].additionalConfiguration': {
+          duration: 5000,
+        },
+      });
+    }, 1000 / 30);
+
+    this.timer = setTimeout(() => {
+      this.scroll();
+    }, 2000);
+  },
+});

xhs-mini-demos/api-case/animation/animation.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "动画",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

xhs-mini-demos/api-case/animation/animation.xhsml

@@ -0,0 +1,32 @@
+<view class="container">
+    <showbox>
+      <box>
+        <view class="animation-element-wrapper flexTop">
+            <view class="animation-element" animation="{{animation}}"></view>
+        </view>
+      </box>
+    </showbox>
+
+
+   <showbox title="展示动画">
+     <box>
+        <view class="_ui-space">
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="rotate">旋转</button>
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="scale">缩放</button>
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="translate">移动</button>
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="skew">倾斜</button>
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="rotateAndScale">旋转并缩放</button>
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="rotateThenScale">旋转后缩放</button>
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="all">同时展示全部动作</button>
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="allInQueue">顺序展示全部动作</button>
+            <button class="_ui-button" hover-class="_ui-button-hover" bindtap="reset">还原</button>
+        </view>
+     </box>
+   </showbox>
+
+   <showbox title="无限循环动画">
+     <box>
+        <view class="animation-element2" animation="{{animationData}}"></view>
+     </box>
+   </showbox>
+</view>