学习鸿蒙基础（11）

目录

一、Navigation容器

二、web组件

三、video视频组件

四、动画

1、属性动画 .animation()

2、 转场动画 transition()  配合animateTo()

3、页面间转场动画

---

一、Navigation容器

Navigation组件一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式。同时，Navigation提供了属性来设置页面的标题栏、工具栏、导航栏等。
Navigation组件的页面包含主页和内容页。主页由标题栏、内容区和工具栏组成，可在内容区中使用NavRouter子组件实现导航栏功能。内容页主要显示NavDestination子组件中的内容。
NavRouter是配合Navigation使用的特殊子组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。
NavRouter有且仅有两个子组件，其中第二个子组件必须是NavDestination。NavDestination是配合NavRouter使用的特殊子组件，用于显示Navigation组件的内容页。当开发者点击NavRouter组件时，会跳转到对应的NavDestination内容区。

@Entry
@Component
struct PageNavigation {
  @State message: string = 'Hello World'
  private list: Object[] = [{ name: "ccb", value: "中国建设银行" }, {
    name: "icbc", value: "中国工商银行" }, { name: "cnc", value: "中国银行" }]
 
  build() {
 
    Navigation() {
      List() {
        ForEach(this.list, (item) => {
          ListItem() {
            NavRouter() {
              Text(item.name).backgroundColor(Color.White).fontSize(30)
                .textAlign(TextAlign.Center).width("100%")
 
              NavDestination() {
                Text(item.value).width("100%").height("100%").backgroundColor(Color.White)
              }
            }
 
          }
        })
      }
    }
    .mode(NavigationMode.Auto)
    .title("笔记")
    .backgroundColor(Color.White)
    .menus([{
      value: '',
      icon: "images/search.png",
      action: () => {
        console.log("点击了搜索")
      }
    }])
    .toolBar({
      items: [{
        value: '左侧',
        icon: "images/search.png",
        action: () => {
          console.log("点击了左侧")
        }
      }, {
        value: '右侧',
        icon: "images/search.png",
        action: () => {
          console.log("点击了右侧")
        }
      }]
    })
    .width("100%")
    .height("100%")
 
  }
}

二、web组件

Web组件的使用非常简单，只需要在Page目录下的ArkTS文件中创建一个Web组件，传入两个参数就可以了。其中src指定引用的网页路径，controller为组件的控制器，通过controller绑定Web组件，用于实现对Web组件的控制。

import webview from '@ohos.web.webview'
 
@Entry
@Component
struct PageWeb {
  @State message: string = 'Hello World'
  webcontroller: WebviewController = new webview.WebviewController()
 
  build() {
    Row() {
      Column() {
        Button("前进").onClick(() => {
          this.webcontroller.forward()
        })
        Button("后退").onClick(() => {
          this.webcontroller.backward()
        })
        Button("刷新").onClick(() => {
          this.webcontroller.refresh()
        })
        Button("清除记录").onClick(() => {
          this.webcontroller.clearHistory()
        })
        Button("获取js中的方法").onClick(() => {
          this.webcontroller.runJavaScript('getUserInfo()', (err, info) => {
            if (!err) {
              console.log("mmmclock---", info)
            }
          })
        })
        Button("将数据注入到js中").onClick(() => {
          this.webcontroller.registerJavaScriptProxy({
            getName:()=>JSON.stringify({userName:"hju",passWord:"123"})
          }, "windowqq", ["getName"])
 
          this.webcontroller.refresh()
        })
        Web({
          // src:"www.baidu.com",
          src: $rawfile("clock.html"),
          controller: this.webcontroller
        }).onConsole(evt => {
          console.log(evt.message.getMessage())
          return false;
        })
          .textZoomRatio(150)
          .zoomAccess(true)
          .javaScriptAccess(true)
      }
      .width('100%')
    }
    .height('100%')
  }
}

//js代码里的方法
 
var userName1=JSON.parse(windowqq.getName()).userName
var password1=JSON.parse(windowqq.getName()).passWord
 
const getUserInfo=()=>{
    return {
		userName:userName
	}
}

三、video视频组件

在手机、平板或是智慧屏这些终端设备上，媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放录制、采集，还是视频的播放、切换、循环，亦或是相机的预览、拍照等功能，媒体组件都是必不可少的。以视频功能为例，在应用开发过程中，我们需要通过ArkU提供的Video组件为应用增加基础的视频播放功能。借助Video组件，我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频，也包括查看我们存储在本地的视频内容。

因为没有真机。不知道video的使用效果如何。

@Entry
@Component
struct PageVideo {
  @State message: string = 'Hello World'
 
  private  controll :VideoController =new VideoController();
  
  build() {
    Row() {
      Column() {
 
        Video({
          src: $rawfile("2.mp4"),
          previewUri: "images/2.jpg",
          controller:this.controll
        }).width("100%").height(40).autoPlay(true)
          .controls(false)//进度条
          .onFinish(()=>{
            console.log("播放完毕")
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

 四、动画

ArkUI中，产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律(即曲线)等参数。当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，即形成一个动画。

动画：1、页面内的动画（属性动画、显示动画、组件内转场动画）。2、页面间的动画（共享元素转场动画、页面转场动画）

1、属性动画 .animation()

//属性动画
 
@Entry
@Component
struct PageAnim {
  @State message: string = 'Hello World'
  @State private  widths:number=100
  @State list: string[] = ["子（鼠）", "丑（牛）", "寅（虎）", "卯（兔）"
    , "辰（龙）", "巳（蛇）", "午（马）", "未（羊）", "申（猴）", "酉（鸡）", "戌（狗）", "亥（猪）"]
 
 
  build() {
    Row() {
      Column() {
        Button("动画").onClick(()=>{
          // animateTo({duration:2000,curve:Curve.Ease},()=>{
          //     this.widths=400;
          // })
          this.widths=300;
        })
        Text(this.message)
          .backgroundColor(Color.Gray)
          .fontSize(40)
          .width(this.widths)
          属性动画。加在属性身上。属性改变的时候。动画展示
        .animation({duration:2000,curve:Curve.Linear})
 
        List(){
          ForEach(this.list,(item,index)=>{
            this.item(item,index)
          })
        }.margin(10)
        .padding(10)
        .borderRadius(3)
        .border({width:5,color:Color.Gray})
      }
      .width('100%').height('100%')
    }
    .height('100%')
  }
 
  @Builder
  item(item,index){
    Row(){
      Text(item).fontSize(35)
      Text("删除").fontSize(35).onClick(()=>{
        animateTo({duration:1000,curve:Curve.Linear},()=>{
          this.list.splice(index,1)
        })
 
      })
    }.backgroundColor(Color.Yellow)
    .width("100%")
    .height(60)
    .justifyContent(FlexAlign.Center)
    .margin({bottom:10})
  }
 
}
 

2、 转场动画 transition()  配合animateTo()

// 转场动画
import Animator from '@ohos.animator'
@Entry
@Component
struct PageAnim1 {
  @State message: string = 'Hello World'
  @State isShow: boolean = false
  @State list: string[] = ["子（鼠）", "丑（牛）", "寅（虎）", "卯（兔）"
    , "辰（龙）", "巳（蛇）", "午（马）", "未（羊）", "申（猴）", "酉（鸡）", "戌（狗）", "亥（猪）"]
 
  build() {
    Row() {
      Column() {
        Button("显示/隐藏").onClick(() => {
          animateTo({
            duration:1000,
            curve:  Curve.Linear
          },()=>{
            this.isShow = !this.isShow
          })
        })
        if (this.isShow) {
          Text(this.message)
            .fontSize(50).backgroundColor(Color.Yellow)
            .fontWeight(FontWeight.Bold)
            // .transition({
            //   type: TransitionType.Insert,
            //   translate:{x:-200,y:0},
            //   opacity:0
            // })
            // .transition({
            //   type:TransitionType.Delete,
            //   translate:{x:-200,y:0},
            //   opacity:0
            // })
            .transition({
              type:TransitionType.All,
              translate:{x:-200,y:0},
              opacity:0
            })
        }
        List(){
          ForEach(this.list,(item,index)=>{
            ListItem(){
              this.item(item,index)
            }.backgroundColor(Color.Yellow)
            .width("100%")
            .height(60)
            .margin({bottom:10})
            // .transition({
            //   type:TransitionType.Insert
            // })
            .transition({
              type:TransitionType.Delete,
              translate:{x:-200},
              scale:{x:0,y:0}
            })
            // .transition({
            //   type:TransitionType.Insert,
            //   translate:{x:100}
            // })
            .height(100)
          },item=>item)
        }.margin(10)
        .padding(10)
        .borderRadius(3)
        .border({width:5,color:Color.Gray})
 
 
      }.height("100%")
      .width('100%')
    }
    .height('100%')
  }
 
  @Builder
  item(item,index){
    Row(){
      Text(item).fontSize(35)
      Text("删除").fontSize(35).onClick(()=>{
        animateTo({duration:1000,curve:Curve.Linear},()=>{
          this.list.splice(index,1)
        })
      })
    }
 
  }
}

3、页面间转场动画

//页面间的跳转
import router from '@ohos.router'
@Entry
@Component
struct PageAnim_1 {
  @State message: string = 'Hello'
 
  build() {
    Row() {
      Column() {
        Button("走你").onClick(()=>{
          router.pushUrl({
            url:"pages/PageAnim_2"
          })
        })
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
 
  pageTransition(){
    // 页面栈发生出栈操作，滑出
    PageTransitionExit({type:RouteType.Push,duration:2000})//入栈
      .slide(SlideEffect.Bottom)
    // 页面栈发生入栈操作，移入
    PageTransitionEnter({type:RouteType.Push,duration:2000})
      .slide(SlideEffect.Bottom)
  }
}
 
 
// 页面间的跳转
import router from '@ohos.router'
import Router from '@system.router'
@Entry
@Component
struct PageAnim_2 {
  @State message: string = 'World'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button("回来").onClick(()=>{
          router.pushUrl({
            url:"pages/PageAnim_1"
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
 
  pageTransition(){
    // push出站
    PageTransitionExit({type:RouteType.Push,duration:2000})
    .slide(SlideEffect.Top)
    // pop入栈
    PageTransitionEnter({type:RouteType.Push,duration:2000})
      .slide(SlideEffect.Top)
  }
}