c-animation

动画组件

示例

  1. <template>
  2. <view class="page-contain">
  3.   <view class="container">
  4.     <view class="btn-box">
  5.       <text class="title">Transform</text>
  6.       <view class="btn-wraper">
  7.         <button text="Rotate" size="medium" c-bind:onclick="rotate"></button>
  8.       </view>
  9.       <view class="btn-wraper">
  10.         <button text="Scale" size="medium" c-bind:onclick="scale"></button>
  11.       </view>
  12.       <view class="btn-wraper">
  13.         <button text="Translate" size="medium" c-bind:onclick="translate"></button>
  14.       </view>
  15.       <view class="btn-wraper">
  16.         <button text="Transform" size="medium" type="green" c-bind:onclick="transform"></button>
  17.       </view>
  18.       <text class="title">Others</text>
  19.       <view class="btn-wraper">
  20.         <button text="BgColor" size="medium" c-bind:onclick="backgroundColor"></button>
  21.       </view>
  22.       <view class="btn-wraper">
  23.         <button text="Opacity" size="medium" c-bind:onclick="opacity"></button>
  24.       </view>
  25.       <view class="btn-wraper">
  26.         <button text="width" size="medium" c-bind:onclick="width"></button>
  27.       </view>
  28.       <view class="btn-wraper">
  29.         <button text="height" size="medium" c-bind:onclick="height"></button>
  30.       </view>
  31.       <view class="btn-wraper">
  32.         <button text="All" size="medium" type="green" c-bind:onclick="composite"></button>
  33.       </view>
  34.     </view>
  35.       <view class="animation-entity" c-animation="{{animationData}}">
  36.         <text class="animation-text">Anim</text>
  37.       </view>
  38.   </view>
  39. </view>
  40. </template>
  41. <script>
  42. import cml from 'chameleon-api';
  44. const animation = cml.createAnimation();
  46. class CAnimation {
  47.   data = {
  48.     animationData: {},
  49.     current_rotate: 0,
  50.     current_scale: 1,
  51.     current_translate: 50,
  52.     current_transform: [45, 1],
  53.     current_color: '#F0AD4E',
  54.     current_opacity: 1,
  55.     current_width: 250,
  56.     current_height: 250,
  57.   }
  58.   methods = {
  59.     rotate () {
  60.       let animationCreation = animation;
  61.       while (this.current_rotate !== 360) {
  62.         this.current_rotate += 90;
  63.         animationCreation = animationCreation
  64.           .rotate(this.current_rotate)
  65.           .step({
  66.             duration: 500,
  67.             timingFunction: 'ease-in-out',
  68.             delay: 0,
  69.           })
  70.       }
  71.       this.animationData = animationCreation.export();
  72.       this.current_rotate = 0
  73.     },
  74.     scale () {
  75.       this.current_scale = this.current_scale === 2 ? 1 : 2
  76.       this.animationData = animation
  77.         .scale(this.current_scale)
  78.         .step({
  79.           duration: 500,
  80.           timingFunction: 'linear',
  81.           delay: 0
  82.         })
  83.         .export()
  84.     },
  85.     translate () {
  86.       this.current_translate = this.current_translate === 50? -50 : 50;
  87.       this.animationData = animation
  88.         .translate(this.current_translate, this.current_translate)
  89.         .step({
  90.           duration: 500,
  91.           timingFunction: 'ease-in',
  92.           delay: 0,
  93.         })
  94.         .export()
  95.     },
  96.     transform () {
  97.       this.current_transform = this.current_transform[0] === 0 ?  [45, 1.2]:[0, 1];
  98.       this.animationData = animation
  99.         .rotate(this.current_transform[0])
  100.         .scale(this.current_transform[1])
  101.         .step({
  102.           duration: 500,
  103.           timingFunction: 'ease-out',
  104.           delay: 0
  105.         })
  106.         .rotate("-90deg")
  107.         .scale(1.2)
  108.         .step({
  109.           duration: 500,
  110.           timingFunction: 'ease-out',
  111.           delay: 0
  112.         })
  113.         .export()
  114.     },
  115.     backgroundColor () {
  116.       this.current_color = this.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E';
  117.       this.animationData = animation
  118.         .backgroundColor(this.current_color)
  119.         .step({
  120.           duration: 500,
  121.           timingFunction: 'linear',
  122.           delay: 0
  123.         })
  124.         .export()
  125.     },
  126.     opacity () {
  127.       this.current_opacity = this.current_opacity === 1 ? 0.1 : 1;
  128.       this.animationData = animation
  129.         .opacity(this.current_opacity)
  130.         .step({
  131.           duration: 500,
  132.           timingFunction: 'linear',
  133.           delay: 0
  134.         })
  135.         .export()
  136.     },
  137.     width () {
  138.       this.current_width = this.current_width === 250 ? 125 : 250;
  140.       this.animationData = animation
  141.         .width(this.current_width)
  142.         .step({
  143.           timingFunction: 'linear',
  144.           delay: 0,
  145.           duration: 500,
  146.         })
  147.         .export()
  148.     },
  149.     height () {
  150.       this.current_height = this.current_height === 250 ? 125 : 250;
  152.       this.animationData = animation
  153.         .height(this.current_height)
  154.         .step({
  155.           duration: 500,
  156.           timingFunction: 'linear',
  157.           delay: 0
  158.         })
  159.         .export()
  160.     },
  161.     composite () {
  162.       this.current_transform = this.current_transform[0] === 0 ?  [45, 1.5]:[0, 1];
  163.       this.current_color = this.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E';
  164.       this.current_opacity = this.current_opacity === 1 ? 0.1 : 1;
  165.       this.current_translate = this.current_translate === 50? -50 : 50;
  166.       this.current_width = this.current_width === 250 ? 125 : 250;
  167.       this.current_height = this.current_height === 250 ? 125 : 250;
  168.       this.animationData = animation
  169.         .width(this.current_width)
  170.         .height(this.current_height)
  171.         .rotate(this.current_transform[0])
  172.         .scale(this.current_transform[1])
  173.         .opacity(this.current_opacity)
  174.         .backgroundColor(this.current_color)
  175.         .translate(this.current_translate, this.current_translate)
  176.         .step({
  177.           duration: 1000,
  178.           timingFunction: 'ease-out',
  179.           delay: 0
  180.         })
  181.         .export()
  182.     }
  183.   }
  184. }
  186. export default new CAnimation();
  187. </script>
  188. <style scoped lang="less">
  190. .title {
  191.   font-size: 45cpx;
  192.   font-weight: 400;
  193.   margin: 20cpx 0;
  194.   padding: 8cpx 30cpx;
  195.   background: #4a4c5b;
  196.   color:#FFFFFF;
  197.   display: block;
  198. }
  199. .animation-entity {
  200.   position: fixed;
  201.   width: 250cpx;
  202.   height: 250cpx;
  203.   top: 500cpx;
  204.   left: 400cpx;
  205.   background-color: #F0AD4E;
  206.   display:flex;
  207.   justify-content:center;
  208.   align-items:center;
  209. }
  210. .animation-text {
  211.   color:#FFFFFF;
  212.   font-size:70cpx;
  213. }
  214. .btn-wraper {
  215.   margin: 6cpx 10cpx;
  216.   display: flex;
  217.   align-items: start;
  218.   justify-content: flex-start;
  219.   flex-direction: column;
  220. }
  221. .page-container {
  222.   font-size: 32cpx;
  223.   color: #000;
  224.   padding: 20cpx 25cpx;
  225.   background: #fafafa;
  226. }
  227. </style>
  228. <script cml-type="json">
  229. {
  230.     "base": {
  231.         "usingComponents": {}
  232.     }    
  233. }
  234. </script>