正方体动画是个web网页，需要显示到鸿蒙中，并调用web网页中的函数来控制动画效果。

1.用web组件显示网页， 配置文件地址，绑定web控制器。

import { webview } from '@kit.ArkWeb'

@Entry
@Component
struct Index {
  webViewController:webview.WebviewController = new webview.WebviewController() // 控制器

  build() {
    Column({ space: 20 }) {
      Web({
        src: $rawfile('index.html'), // 可以写rawfile文件夹里的html文件，也可以写网络地址 要配置网络请求
        controller:this.webViewController // 控制器 可以通过控制器做些操
      }).width('100%').height('60%')
    }
  }
}

 2.使用web控制器中的runJavaScript方法向web文件中写入js语句来调用web文件中的函数。

Button('开启旋转').onClick((event: ClickEvent) => {
  this.webViewController.runJavaScript(`startRotation()`)
})
Button('关闭旋转').onClick((event: ClickEvent) => {
  this.webViewController.runJavaScript(`stopRotation()`)
})

3. 用onPageEnd()钩子在web加载完之后就开启动画

// onPageEnd是web文件加载完成后的周期钩子
.onPageEnd(() => {
  this.webViewController.runJavaScript(`startRotation()`)
})

web组件的生命周期：