成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

HarmonyOS三方開源組件—鴻蒙JS實現仿螞蟻森林

作者：中軟胡洋
開源 OpenHarmony
HarmonyOS三方開源組件之鴻蒙JS實現仿螞蟻森林，自定義仿支付寶螞蟻森林水滴控件,提供了JAVA UI和JS UI兩種實現方式。

[[415355]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

實現的效果圖：

分析實現過程：

1、接收外部傳遞給組件的一個數組(小球能量列表)，及收集能量動畫結束的位置

  1. <!-- waterFlake.js --> 
  2.  props: { 
  3.     //后臺返回的小球信息 
  4.         ballList: { 
  5.             default: [10, 11, 12, 13, 14], 
  6.         }, 
  7.     // 收集能量動畫結束的X坐標 
  8.         collDestinationX: { 
  9.             default: 350 
  10.         }, 
  11.     // 收集能量動畫結束的Y坐標 
  12.         collDestinationY: { 
  13.             default: 400 
  14.         } 
  15.     }, 

2、根據小球的數量，生成小球的隨機位置坐標。

  1. // 生成小球的x坐標數組 
  2.  let xRandom = this.randomCommon(1, 8, this.ballList.length) 
  3.  let all_x = xRandom.map(item => { 
  4.      return item * width * 0.10 
  5.  }); 
  6.  //生成小球的y坐標數組 
  7.  let yRandom = this.randomCommon(1, 8, this.ballList.length); 
  8.  let all_y = yRandom.map(item => { 
  9.      return item * height * 0.08 
  10.  }) 
  1. /** 
  2.      * 隨機指定范圍內N個不重復的數 
  3.      * 最簡單最基本的方法 
  4.      * 
  5.      * @param min 指定范圍最小值 
  6.      * @param max 指定范圍最大值 
  7.      * @param n   隨機數個數 
  8.      * @return 隨機數列表 
  9.      */ 
  10.     randomCommon(min, max, n) { 
  11.         if (n > (max - min + 1) || max < min) { 
  12.             return null; 
  13.         } 
  14.         let result = []; 
  15.         let count = 0; 
  16.         while (count < n) { 
  17.             let num = parseInt((Math.random() * (max - min)) + min); 
  18.             let flag = true; 
  19.             for (let j = 0; j < n; j++) { 
  20.                 if (num == result[j]) { 
  21.                     flag = false; 
  22.                     break; 
  23.                 } 
  24.             } 
  25.             if (flag) { 
  26.                 result[count] = num; 
  27.                 count++; 
  28.             } 
  29.         } 
  30.         return result; 
  31.     }, 

3、根據傳遞進來的能量列表及生成的小球坐標，組裝成我們需要的小球數據列表ballDataList[]

  1. /** 
  2.  * ballDataList的每個對象包括以下屬性： 
  3.  * content(小球顯示的文本信息) 
  4.  * x(橫坐標）、 
  5.  * y(縱坐標) 
  6.  */ 
  7. ballDataList: [], 
  1. let dataList = [] 
  2.  for (let index = 0; index < this.ballList.length; index++) { 
  3.      dataList.push({ 
  4.          content: this.ballList[index] + 'g', 
  5.          x: all_x[index], 
  6.          y: all_y[index] 
  7.      }) 
  8.  } 
  9.  this.ballDataList = dataList; // 觸發視圖更新 

4、繪制小球隨機顯示界面

  1. <!-- waterFlake.hml --> 
  2. <div class="main_contain" ref="main_contain" id="main_contain"> 
  3.     <text for="{{ ballDataList }}" 
  4.           style="top : {{ $item.y }} px; 
  5.                   left : {{ $item.x }} px;" 
  6.             >{{ $item.content }}</text> 
  7.  
  8. </div> 
  1. .main_contain { 
  2.     width: 100%; 
  3.     position: relative; 
  4. } 
  5.  
  6. .ball { 
  7.     width: 120px; 
  8.     height: 120px; 
  9.     background-color: #c3f593; 
  10.     background-size: 100%; 
  11.     border-radius: 60px; 
  12.     border: #69c78e; 
  13.     border-bottom-style: solid; 
  14.     border-width: 1px; 
  15.     position: absolute; 
  16.     text-align: center; 
  17. } 

5、給小球添加動畫：

由于鴻蒙JSUI框架@keyframes 動畫只能指定動畫初始樣式(from屬性)和終止樣式(to屬性)，故只能采用JS給小球指定動畫。

小球移動軌跡為上下浮動的簡單動畫，可有兩種思路實現：

方式一：為每個小球設置連續無限次數動畫

  1. createShakeAnimate(el) { 
  2.         if (el == null || el == undefined) { 
  3.             return 
  4.         } 
  5.         var options = { 
  6.             duration: 2000, 
  7.             easing: 'friction', 
  8.             fill: 'forwards', 
  9.             iterations: "Infinity", 
  10.         }; 
  11.         var frames = [ 
  12.             { 
  13.                 transform: { 
  14.                     translate: '0px 0px' 
  15.                 }, 
  16.                 offset: 0.0 // 動畫起始時 
  17.             }, 
  18.             { 
  19.                 transform: { 
  20.                     translate: '0px 20px' 
  21.                 }, 
  22.                 offset: 0.5 // 動畫執行至一半時 
  23.             }, 
  24.             { 
  25.                 transform: { 
  26.                     translate: '0px 0px' 
  27.                 }, 
  28.                 offset: 1.0 // 動畫結束時 
  29.             }, 
  30.  
  31.         ]; 
  32.         let animation = el.animate(frames, options); 
  33.         return animation 
  34.     }, 

方式二：每個小球設置為單向動畫，只執行一次，監聽動畫結束時，調用reverse()方法執行反轉動畫

  1. createShakeAnimate(el) { 
  2.       if (el == null || el == undefined) { 
  3.           return 
  4.       } 
  5.       var options = { 
  6.           duration: 2000, 
  7.           easing: 'friction', 
  8.           fill: 'forwards', 
  9.           iterations: 1, 
  10.       }; 
  11.       var frames = [ 
  12.           { 
  13.               transform: { 
  14.                   translate: '0px 0px' 
  15.               }, 
  16.               offset: 0.0 
  17.           }, 
  18.           { 
  19.               transform: { 
  20.                   translate: '0px 20px' 
  21.               }, 
  22.               offset: 1.0 
  23.           }, 
  24.       ]; 
  25.       let animation = el.animate(frames, options); 
  26.        animation.onfinish = function () { 
  27.           animation.reverse() 
  28.       }; 
  29.       return animation 

執行浮動動畫

  1. <!-- waterFlake.hml 為每個小球指定id --> 
  2.   <text for="{{ ballDataList }}" 
  3.           class="ball" 
  4.           id="ball{{ $idx }}" 
  5.           onclick="onBallClick($idx,$item)" 
  6.           style="top : {{ $item.y }} px; 
  7.                   left : {{ $item.x }} px;" 
  8.             >{{ $item.content }}</text> 
  1. <!-- waterFlake.js  執行動畫 --> 
  2.  playShakeAnimate() { 
  3.       setTimeout(() => { 
  4.           console.info('xwg playShakeAnimate '); 
  5.           for (var index = 0; index < this.ballDataList.length; index++) { 
  6.               let el = this.$element(`ball${index}`) 
  7.               let animate = this.createShakeAnimate(el) 
  8.               animate.play() 
  9.           } 
  10.       }, 50) 
  11.     }, 

6、為小球設置點擊事件及收集能量動畫

  1. onBallClick(index, item) { 
  2.    // 發送事件給父組件 并將小球信息作為參數傳遞出去 
  3.    this.$emit('ballClick', item); 
  4.  
  5.    let el = this.$element(`ball${index}`) 
  6.    this.playCollectionAnimate(el, index) 
  7. }, 
  1. /** 
  2.  * 執行收集的動畫 
  3.  * @param el 
  4.  * @param index 
  5.  * @return 
  6.  */ 
  7. playCollectionAnimate(el, index) { 
  8.     if (this.isCollect) { // 正在執行收集動畫則直接return 
  9.         return 
  10.     } 
  11.     var options = { 
  12.         duration: 1500, 
  13.         easing: 'ease-in-out', 
  14.         fill: 'forwards', 
  15.     }; 
  16.     let offsetX = this.collDestinationX - this.ballDataList[index].x 
  17.     let offsetY = this.collDestinationY - this.ballDataList[index].y 
  18.     var frames = [ 
  19.         { 
  20.             transform: { 
  21.                 translate: '0px 0px' 
  22.             }, 
  23.             opacity: 1 
  24.         }, 
  25.         { 
  26.             transform: { 
  27.                 translate: `${offsetX}px ${offsetY}px` 
  28.             }, 
  29.             opacity: 0 
  30.         } 
  31.     ]; 
  32.     let animation = el.animate(frames, options); 
  33.     let _t = this 
  34.     animation.onfinish = function () { 
  35.         console.info('onBallClick collection animation onFinish'); 
  36.         _t.isCollect = false; 
  37.         _t.ballDataList.splice(index, 1); 
  38.         console.info(JSON.stringify(_t.ballDataList)); 
  39.  
  40.         // 調用splice方法后，原index位置的小球不再執行動畫，故手動再創建動畫 
  41.         if (index <= _t.ballDataList.length) { 
  42.             setTimeout(() => { 
  43.                 let animate = _t.createShakeAnimate(el) 
  44.                 animate.play() 
  45.             }, 5) 
  46.         } 
  47.     }; 
  48.     this.isCollect = true 
  49.     animation.play() 
  50. }, 

7、父組件點擊重置時，更新界面

  1.  onInit() { 
  2.         this.$watch('ballList', 'onBallListChange'); //注冊數據變化監聽 
  3. }, 
  4. onBallListChange(newV) { // 外部數據發生變化 重新渲染組件 
  5.         console.log('onBallListChange newV = ' + JSON.stringify(newV)) 
  6.         this.onReady() 
  7.     } 

完整代碼如下：

子組件：

  1. <!-- waterFlake.css --> 
  2. .main_contain { 
  3.     width: 100%; 
  4.     position: relative; 
  5. } 
  6.  
  7. .ball { 
  8.     width: 100px; 
  9.     height: 100px; 
  10.     background-color: #c3f593; 
  11.     background-size: 100%; 
  12.     border-radius: 60px; 
  13.     border: #69c78e; 
  14.     border-bottom-style: solid; 
  15.     border-width: 1px; 
  16.     position: absolute; 
  17.     text-align: center; 
  18. } 
  19.  
  20. @keyframes Wave { 
  21.     from { 
  22.         transform: translateY(0px); 
  23.     } 
  24.  
  25.     to { 
  26.         transform: translateY(10px); 
  27.     } 
  28. } 
  1. <!-- waterFlake.hml --> 
  2. <div class="main_contain" ref="main_contain" id="main_contain"> 
  3.     <text for="{{ ballDataList }}" 
  4.           ref="ball{{ $idx }}" class="ball" 
  5.           id="ball{{ $idx }}" 
  6.           tid="ball{{ $idx }}" 
  7.           onclick="onBallClick($idx,$item)" 
  8.           style="top : {{ $item.y }} px; 
  9.                   left : {{ $item.x }} px;" 
  10.             >{{ $item.content }}</text> 
  11.  
  12. </div> 
  1. <!-- waterFlake.js --> 
  2. export default { 
  3.     props: { 
  4.     //后臺返回的小球信息 
  5.         ballList: { 
  6.             default: [10, 11, 12, 13, 14], 
  7.         }, 
  8.     // 收集能量動畫結束的X坐標 
  9.         collDestinationX: { 
  10.             default: 0 
  11.         }, 
  12.     // 收集能量動畫結束的Y坐標 
  13.         collDestinationY: { 
  14.             default: 600 
  15.         } 
  16.     }, 
  17.     data() { 
  18.         return { 
  19.         /** 
  20.              * ballDataList的每個對象包括以下屬性： 
  21.              * content(小球顯示的文本信息) 
  22.              * x(橫坐標）、 
  23.              * y(縱坐標)、 
  24.              */ 
  25.             ballDataList: [], 
  26.             isCollect: false // 是否正在執行收集能量動畫 
  27.         }; 
  28.     }, 
  29.     onInit() { 
  30.         this.$watch('ballList', 'onBallListChange'); //注冊數據變化監聽 
  31.     }, 
  32.     onReady() { 
  33.         let width = 720 //組件的款第 
  34.         let height = 600 //組件的高度 
  35.         // 生成小球的x坐標數組 
  36.         let xRandom = this.randomCommon(1, 8, this.ballList.length) 
  37.         let all_x = xRandom.map(item => { 
  38.             return item * width * 0.10 
  39.         }); 
  40.         //生成小球的y坐標數組 
  41.         let yRandom = this.randomCommon(1, 8, this.ballList.length); 
  42.         let all_y = yRandom.map(item => { 
  43.             return item * height * 0.08 
  44.         }) 
  45.         if (xRandom == null || yRandom == null) { 
  46.             return 
  47.         } 
  48.         let dataList = [] 
  49.         for (let index = 0; index < this.ballList.length; index++) { 
  50.             dataList.push({ 
  51.                 content: this.ballList[index] + 'g', 
  52.                 x: all_x[index], 
  53.                 y: all_y[index] 
  54.             }) 
  55.         } 
  56.         this.ballDataList = dataList; // 觸發視圖更新 
  57.         console.info('onReady ballDataList = ' + JSON.stringify(this.ballDataList)); 
  58.  
  59.         this.playShakeAnimate() // 開始執行抖動動畫 
  60.     }, 
  61.     onBallClick(index, item) { 
  62.         console.info('onBallClick index = ' + index); 
  63.         console.info('onBallClick item = ' + JSON.stringify(item)); 
  64.         this.$emit('ballClick', item); 
  65.         let el = this.$element(`ball${index}`) 
  66.         this.playCollectionAnimate(el, index) 
  67.     }, 
  68. /** 
  69.      * 執行收集的動畫 
  70.      * @param el 
  71.      * @param index 
  72.      * @return 
  73.      */ 
  74.     playCollectionAnimate(el, index) { 
  75.         if (this.isCollect) { // 正在執行收集動畫則直接return 
  76.             return 
  77.         } 
  78.         var options = { 
  79.             duration: 1500, 
  80.             easing: 'ease-in-out', 
  81.             fill: 'forwards', 
  82.         }; 
  83.         let offsetX = this.collDestinationX - this.ballDataList[index].x 
  84.         let offsetY = this.collDestinationY - this.ballDataList[index].y 
  85.         var frames = [ 
  86.             { 
  87.                 transform: { 
  88.                     translate: '0px 0px' 
  89.                 }, 
  90.                 opacity: 1 
  91.             }, 
  92.             { 
  93.                 transform: { 
  94.                     translate: `${offsetX}px ${offsetY}px` 
  95.                 }, 
  96.                 opacity: 0 
  97.             } 
  98.         ]; 
  99.         let animation = el.animate(frames, options); 
  100.         let _t = this 
  101.         animation.onfinish = function () { 
  102.             console.info('onBallClick collection animation onFinish'); 
  103.             _t.isCollect = false; 
  104.             _t.ballDataList.splice(index, 1); 
  105.             console.info(JSON.stringify(_t.ballDataList)); 
  106.  
  107.             // 調用splice方法后，原index位置的小球不再執行動畫，故手動再創建動畫 
  108.             if (index <= _t.ballDataList.length) { 
  109.                 setTimeout(() => { 
  110.                     let animate = _t.createShakeAnimate(el) 
  111.                     animate.play() 
  112.                 }, 5) 
  113.             } 
  114.         }; 
  115.         this.isCollect = true 
  116.         animation.play() 
  117.     }, 
  118.     createShakeAnimate(el) { 
  119.         if (el == null || el == undefined) { 
  120.             return 
  121.         } 
  122.         var options = { 
  123.             duration: 2000, 
  124.             easing: 'friction', 
  125.             fill: 'forwards', 
  126.             iterations: "Infinity", 
  127.         }; 
  128.         var frames = [ 
  129.             { 
  130.                 transform: { 
  131.                     translate: '0px 0px' 
  132.                 }, 
  133.                 offset: 0.0 
  134.             }, 
  135.             { 
  136.                 transform: { 
  137.                     translate: '0px 20px' 
  138.                 }, 
  139.                 offset: 0.5 
  140.             }, 
  141.             { 
  142.                 transform: { 
  143.                     translate: '0px 0px' 
  144.                 }, 
  145.                 offset: 1.0 
  146.             }, 
  147.  
  148.         ]; 
  149.         let animation = el.animate(frames, options); 
  150.         return animation 
  151.     }, 
  152.     playShakeAnimate() { 
  153.         setTimeout(() => { 
  154.             console.info('xwg playShakeAnimate '); 
  155.             for (var index = 0; index < this.ballDataList.length; index++) { 
  156.                 let el = this.$element(`ball${index}`) 
  157.                 let animate = this.createShakeAnimate(el) 
  158.                 animate.play() 
  159.             } 
  160.         }, 50) 
  161.     }, 
  162. /** 
  163.      * 隨機指定范圍內N個不重復的數 
  164.      * 最簡單最基本的方法 
  165.      * 
  166.      * @param min 指定范圍最小值 
  167.      * @param max 指定范圍最大值 
  168.      * @param n   隨機數個數 
  169.      * @return 隨機數列表 
  170.      */ 
  171.     randomCommon(min, max, n) { 
  172.         if (n > (max - min + 1) || max < min) { 
  173.             return null; 
  174.         } 
  175.         let result = []; 
  176.         let count = 0; 
  177.         while (count < n) { 
  178.             let num = parseInt((Math.random() * (max - min)) + min); 
  179.             let flag = true; 
  180.             for (let j = 0; j < n; j++) { 
  181.                 if (num == result[j]) { 
  182.                     flag = false; 
  183.                     break; 
  184.                 } 
  185.             } 
  186.             if (flag) { 
  187.                 result[count] = num; 
  188.                 count++; 
  189.             } 
  190.         } 
  191.         return result; 
  192.     }, 
  193.     onBallListChange(newV) { // 外部數據發生變化 重新渲染組件 
  194.         console.log('onBallListChange newV = ' + JSON.stringify(newV)) 
  195.         this.onReady() 
  196.     } 
  197. } 

父組件：

  1. <!-- index.css --> 
  2. .container { 
  3.     flex-direction: column; 
  4.     align-items: flex-start; 
  5. } 
  6.  
  7. .title { 
  8.     font-size: 100px; 
  9. } 
  10.  
  11. .forestContainer { 
  12.     width: 100%; 
  13.     height: 750px; 
  14.     background-image: url("/common/bg.jpg"); 
  15.     background-size: 100%; 
  16.     background-repeat: no-repeat; 
  17. } 
  1. <!-- index.hml --> 
  2. <element name='waterFlake' src='../../../default/common/component/waterflake/waterFlake.hml'></element> 
  3. <div class="container"> 
  4.     <div class="forestContainer"> 
  5.         <waterFlake ball-list="{{ ballList }}" @ball-click="onBallClick"></waterFlake> 
  6.     </div> 
  7.     <button style="padding : 20px; align-content : center; background-color : #222222;" 
  8.             onclick="reset">重置 
  9.     </button> 
  10.  
  11. </div> 
  1. <!-- index.js --> 
  2. import prompt from '@system.prompt'; 
  3. export default { 
  4.     data() { 
  5.         return { 
  6.             ballList: [] 
  7.         } 
  8.     }, 
  9.     onInit() { 
  10.         this.ballList = this.genRandomArray(5); 
  11.     }, 
  12.     onBallClick(info) { 
  13.         console.info('xwg parent  onBallClick item = ' + JSON.stringify(info.detail)); 
  14.         let content = info.detail.content 
  15.         prompt.showToast({message:`點擊了${content}`,duration:1500}) 
  16.     }, 
  17.     reset() { 
  18.         console.info("xwg reset clicked ") 
  19.         this.ballList = this.genRandomArray(6); 
  20.         console.info("xwg reset  ballList = " + JSON.stringify(this.ballList)) 
  21.     }, 
  22.     genRandomArray(count) { 
  23.         let ballArray = [] 
  24.         for (var index = 0; index < count; index++) { 
  25.             let v = this.random(1, 60) 
  26.             ballArray.push(parseInt(v)) 
  27.         } 
  28.         return ballArray 
  29.     }, 
  30.     random(min, max) { 
  31.         return Math.floor(Math.random() * (max - min)) + min; 
  32.     } 
  33. } 

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

 

責任編輯：jianghua 來源： 鴻蒙社區
鴻蒙HarmonyOS應用
相關推薦

2021-08-02 14:54:50

鴻蒙HarmonyOS應用

2021-08-09 10:24:49

鴻蒙HarmonyOS應用

2021-04-29 14:32:24

鴻蒙HarmonyOS應用

2021-03-10 15:03:40

鴻蒙HarmonyOS應用

2021-08-26 16:07:46

鴻蒙HarmonyOS應用

2021-08-03 10:07:41

鴻蒙HarmonyOS應用

2021-04-28 09:56:44

鴻蒙HarmonyOS應用

2021-03-24 09:30:49

鴻蒙HarmonyOS應用

2021-04-28 15:07:06

鴻蒙HarmonyOS應用

2021-08-03 12:47:58

鴻蒙HarmonyOS應用

2021-03-01 14:00:11

鴻蒙HarmonyOS應用

2021-06-28 14:48:03

鴻蒙HarmonyOS應用

2021-01-18 09:52:20

鴻蒙HarmonyOS開發

2021-02-04 09:45:19

鴻蒙HarmonyOS應用開發

2021-01-27 10:04:46

鴻蒙HarmonyOS動畫

2021-11-17 15:37:43

鴻蒙HarmonyOS應用

2021-07-30 14:54:54

鴻蒙HarmonyOS應用

2021-07-06 18:21:31

鴻蒙HarmonyOS應用

2021-04-08 14:57:52

鴻蒙HarmonyOS應用

2021-04-20 15:06:42

鴻蒙HarmonyOS應用
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 国产亚洲精品一区二区三区 | 久艹av | 国产精品1区 | 久久丝袜视频 | 国内精品久久精品 | 久久精品免费 | 亚洲精品日韩视频 | 黄色大片毛片 | 精品亚洲一区二区三区四区五区 | 国产久| 自拍视频一区二区三区 | 国产在线一区二区三区 | 久久午夜电影 | 久久男人 | a级在线免费视频 | 99久久久久久99国产精品免 | 国产精品福利在线 | 亚洲精品在线免费看 | 久久九精品| 国产激情片在线观看 | 国产一级网站 | 日韩中文一区二区三区 | 中文字幕av高清 | 影音先锋中文在线 | 国产精品欧美一区二区三区不卡 | 国产精品一区三区 | 欧美 日韩精品 | 美女天堂| 午夜精品久久久久久久久久久久 | 中文字幕成人av | 久久精品视频一区二区三区 | 中文字幕亚洲区 | 日韩一区二区三区在线观看 | 三级视频网站 | 欧美小视频在线观看 | 欧美男人天堂 | 日本不卡一区二区三区 | 激情五月婷婷综合 | 午夜亚洲| 91久久视频 | 国产精品美女久久久久久免费 |