学习鸿蒙基础（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()).passWordconst 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%')}@Builderitem(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%')}@Builderitem(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)}
}