{"id":35400,"date":"2025-05-04T13:50:17","date_gmt":"2025-05-04T05:50:17","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/35400.html"},"modified":"2025-05-04T13:50:17","modified_gmt":"2025-05-04T05:50:17","slug":"%e3%80%90harmonyos-next%e4%b9%8b%e6%97%85%e3%80%91%e5%9f%ba%e4%ba%8earkts%e5%bc%80%e5%8f%91%e4%b8%89-%ef%bc%9e-%e5%85%bc%e5%ae%b9js%e7%9a%84%e7%b1%bbweb%e5%bc%80%e5%8f%91%e4%b8%83-%ef%bc%9e-js","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/35400.html","title":{"rendered":"\u3010HarmonyOS Next\u4e4b\u65c5\u3011\u57fa\u4e8eArkTS\u5f00\u53d1(\u4e09) -\uff1e \u517c\u5bb9JS\u7684\u7c7bWeb\u5f00\u53d1(\u4e03) -\uff1e JS\u52a8\u753b(\u4e8c)"},"content":{"rendered":"

\u76ee\u5f55<\/span><\/p>\n

1 -> \u52a8\u753b\u52a8\u6548<\/span><\/p>\n

1.1 -> \u521b\u5efa\u52a8\u753b\u5bf9\u8c61<\/span><\/p>\n

1.2 -> \u6dfb\u52a0\u52a8\u753b\u4e8b\u4ef6\u548c\u8c03\u7528\u63a5\u53e3<\/span><\/p>\n

2 -> \u52a8\u753b\u5e27<\/span><\/p>\n

2.1 -> \u8bf7\u6c42\u52a8\u753b\u5e27<\/span><\/p>\n

2.2 -> \u53d6\u6d88\u52a8\u753b\u5e27<\/span><\/p>\n

\n

\"\"<\/p>\n

1 -> \u52a8\u753b\u52a8\u6548<\/h2>\n

\u901a\u8fc7\u8bbe\u7f6e\u63d2\u503c\u5668\u6765\u5b9e\u73b0\u52a8\u753b\u6548\u679c\u3002<\/span><\/p>\n

\u8bf4\u660e<\/span><\/p>\n

\u4eceAPI Version 6 \u5f00\u59cb\u652f\u6301\u3002<\/span><\/p>\n

1.1 -> \u521b\u5efa\u52a8\u753b\u5bf9\u8c61<\/h3>\n

\u901a\u8fc7createAnimator\u521b\u5efa\u4e00\u4e2a\u52a8\u753b\u5bf9\u8c61，\u901a\u8fc7\u8bbe\u7f6e\u53c2\u6570options\u6765\u8bbe\u7f6e\u52a8\u753b\u7684\u5c5e\u6027\u3002<\/span><\/p>\n

<!– test.hml –>
\n<div class="container">
\n <div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});">
\n <\/div>
\n <div class="row">
\n <button type="capsule" value="play" onclick="playAnimation"><\/button>
\n <\/div>
\n<\/div>
\n\/* test.css *\/
\n.container {
\n width:100%;
\n height:100%;
\n flex-direction: column;
\n align-items: center;
\n justify-content: center;
\n}
\nbutton{
\n width: 200px;
\n}
\n.row{
\n width: 65%;
\n height: 100px;
\n align-items: center;
\n justify-content: space-between;
\n margin-top: 50px;
\n margin-left: 260px;
\n}
\n\/* test.js *\/
\nimport animator from '@ohos.animator';
\nexport default {
\n data: {
\n translateVal: 0,
\n animation: null
\n },
\n onInit() {},
\n onShow(){
\n var options = {
\n duration: 3000,
\n easing:"friction",
\n delay:"1000",
\n fill: 'forwards',
\n direction:'alternate',
\n iterations: 2,
\n begin: 0,
\n end: 180
\n };\/\/\u8bbe\u7f6e\u53c2\u6570
\n this.animation = animator.createAnimator(options)\/\/\u521b\u5efa\u52a8\u753b
\n },
\n playAnimation() {
\n var _this = this;
\n this.animation.onframe = function(value) {
\n _this.translateVal= value
\n };
\n this.animation.play();
\n }
\n} <\/p>\n

\"\"<\/p>\n

\u8bf4\u660e<\/span><\/p>\n