ArkTS开发系列之导航 (2.7动画）

2024-06-24 08:04
文章标签 arkts 2.7 动画 导航 系列 开发

本文主要是介绍ArkTS开发系列之导航 (2.7动画），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上篇回顾： ArkTS开发系列之导航 (2.6 图形）

本篇内容：动画的学习使用

一、 知识储备

1. 布局更新动画

  • 包含显式动画（animateTo）和属性动画（animation）
动画类型名称特点
显式动画闭包内的变化都会触发动画执行， 可以做较复杂的动画
属性动画属性变化时触发动画执行， 设置简单

说白了，显示动画就是靠闭包事件触发，属性动画是挂在组件身上的属性变化触发

  • 显式动画 可以通过修改组件的布局方式、宽高、位置触发动画
 animateTo({ duration: 1000, curve: Curve.Ease }, () => {// 动画闭包中根据标志位改变控制第一个Button宽高的状态变量，使第一个Button做宽高动画if (this.flag) {this.myWidth = 100;this.myHeight = 50;} else {this.myWidth = 200;this.myHeight = 100;}this.flag = !this.flag;});
  • 属性动画
 Image($r('app.media.ic_hm_logo')).width(160).height(160).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },right: { anchor: '__container__', align: this.itemAlign }}).margin({ top: this.mTop, right: 35 }).id('logo').animation({ duration: 1000, curve: Curve.Ease }) //animation只对上面的设置生效.onClick(() => {this.mTop = 111})

2. 组件内转场动画（transition)

  • transition常见用法
Button()   //删除插入同一个动画.transition({ type: TransitionType.All, scale: { x: 0, y: 0 } })

Button()//删除插入不同动画.transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 }, opacity: 0 }).transition({ type: TransitionType.Delete, rotate: { x: 0, y: 0, z: 1, angle: 360 } })

3. 弹簧曲线动画

  • 分为两类，一个springCurve，一个springMotion和responsiveSpringMotion。
  • springCurve
springCurve(velocity: number, mass: number, stiffness: number, damping: number)
//velocity:  初速度
//mass:弹簧系统的质量
//stiffness:弹簧系统的刚度
//damping:弹簧系统的阻尼
  • springMotion和responsiveSpringMotion。此动画适合跟手动画，duration设置无效。跟手过程推荐使用responsiveSpringMotion，松手时使用springMotion
springMotion(response?: number, dampingFraction?: number, overlapDuration?: number)
responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number)
//response:可选参数 弹簧自然振动周期
//dampingFraction:可选参数阻尼系数
//overlapDuration:可选参数弹性动画衔接时长
  • 注意： springCurve可以设置初速度，单一属性存在多个动画时，可以正常叠加动画效果。springMotion，由于开发者不可修改速度机制，所以在单一属性存在多个动画时，后一动画会取代前一动画。并继承前一动画的速度
  .onTouch(event => {if (event.type == TouchType.Move) {animateTo({ curve: curves.responsiveSpringMotion() }, () => {this.mRight = event.touches[0].screenX - 80;})} else if (event.type == TouchType.Up) {animateTo({curve: curves.springMotion()}, ()=>{this.mRight = 35;})}})

4. 放大缩小动画

  • sharedTransition,
  • Exchange类型的共享元素转场动画,就是前后两个页面都设置有相同id的动画，那么转场时，将会自动触发缩放动画
      .sharedTransition('sharedTransition', { duration: 1000, curve: Curve.Linear })
  • Static类型的共享元素转场动画, 只需要在一个页面设置即可，在转换页面时自动触发透明度从0到该组件原设定的的透明度的动画。位置等其他属性不变
   .sharedTransition('input', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static })

5. 页面转场动画

  • 页面转场切换时，效果触发在页面上，在pageTransition函数中设置PageTransitionEntert和PageTransitionExit动画
PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})
PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})
//type:默认是RouteType.None表示对页面栈的push和pop操作均生效，
//duration: 动画时长
//curve: 动画效果
//delay: 动画延时

转场动画设置pageTransition() {PageTransitionEnter({ type: RouteType.Push, duration: 1000, }).slide(SlideEffect.Right)PageTransitionEnter({ type: RouteType.Pop, duration: 1000, }).slide(SlideEffect.Left)PageTransitionExit({type: RouteType.Push, duration: 1000}).slide(SlideEffect.Left)PageTransitionExit({type: RouteType.Pop, duration: 1000}).slide(SlideEffect.Right)}

二、 效果一览

在这里插入图片描述

三、 源码剖析

import promptAction from '@ohos.promptAction';
import picker from '@ohos.file.picker';
import thermal from '@ohos.thermal';
import router from '@ohos.router';
import curves from '@ohos.curves';@Component
@Entry
struct LoginPage {@State account: string = '';@State password: string = '';dialog: CustomDialogController = new CustomDialogController({builder: TipDialog({cancel: this.onCancel,commit: this.onCommit,msg: this.account}),alignment: DialogAlignment.Center});onCancel() {promptAction.showToast({ message: '取消登录' })}onCommit() {promptAction.showToast({ message: '登录成功' })router.pushUrl({ url: 'pages/router/MyRouter' })}@State color: Color = 0x1f2937;@State itemAlign: HorizontalAlign = HorizontalAlign.CenterallAlign: HorizontalAlign[] = [HorizontalAlign.Center, HorizontalAlign.End]alignIndex: number = 0;@State mTop: number = 106@State flag: boolean = true@State translateX: number = 0;@State mRight: number = 35;build() {Column() {RelativeContainer() {// Photo()Text('欢迎登录').fontSize(25).fontColor(this.color).margin({ top: 111, left: 33 }).id('tips').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }}).width('100%').fontWeight(FontWeight.Bold)Image($r('app.media.ic_hm_logo')).width(160).height(160).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },right: { anchor: '__container__', align: this.itemAlign }}).margin({ top: this.mTop, right: this.mRight }).id('logo').animation({ duration: 1000, curve: Curve.Ease }) //animation只对上面的设置生效  属性动画.onTouch(event => {if (event.type == TouchType.Move) {animateTo({ curve: curves.responsiveSpringMotion() }, () => {this.mRight = event.touches[0].screenX - 80;})} else if (event.type == TouchType.Up) {animateTo({ curve: curves.springMotion() }, () => {this.mRight = 35;})}}).onClick(() => {if (this.mTop == 111) {this.mTop = 106} else {this.mTop = 111;}animateTo({ curve: Curve.LinearOutSlowIn, duration: 1000 }, () => {this.flag = !this.flag;})this.translateX = -1;animateTo({ curve: curves.springCurve(2000, 1, 1, 1.2), duration: 1000 }, () => {this.translateX = 0;})})if (this.flag) {Image($r('app.media.ic_hm_logo')).width(160).height(160).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },right: { anchor: '__container__', align: this.itemAlign }}).margin({ top: 580, right: 35 }).id('bottom_logo').translate({ x: this.translateX }).transition({ type: TransitionType.Insert, opacity: 1, scale: { x: 0, y: 0 } }).transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })}Image($r('app.media.ic_hm_logo')).width(160).height(160).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },right: { anchor: '__container__', align: this.itemAlign }}).margin({ top: 600, right: 35 }).id('bottom_animateTo').translate({ x: this.translateX }).sharedTransition('sharedTransition', { duration: 1000, curve: Curve.Linear }).onClick(() => {router.pushUrl({ url: 'pages/router/MyRouter' })})Text('用户名:').fontSize(14).fontColor(this.color).alignRules({top: { anchor: 'tips', align: VerticalAlign.Bottom },left: { anchor: 'tips', align: HorizontalAlign.Start }}).margin({ top: 140, left: 33 }).height(20).textAlign(TextAlign.Center).id('account').width(60)TextInput({ placeholder: '请输入账号' }).alignRules({top: { anchor: 'account', align: VerticalAlign.Bottom },left: { anchor: 'account', align: HorizontalAlign.Start }}).margin({ top: 13, left: 33, right: 33 }).id("etAccount").height(46).fontColor(this.color).onChange(val => {this.account = val;})Text('密码:').fontSize(14).fontColor('#333333').alignRules({top: { anchor: 'etAccount', align: VerticalAlign.Bottom },left: { anchor: 'etAccount', align: HorizontalAlign.Start }}).width(60).height(20).margin({ top: 15, left: 33 }).textAlign(TextAlign.Center).id('password')TextInput({ placeholder: '请输入密码' }).alignRules({top: { anchor: 'password', align: VerticalAlign.Bottom },left: { anchor: 'password', align: HorizontalAlign.Start }}).type(InputType.Password).margin({ top: 13, left: 33, right: 33 }).id("etPassword").height(46).onChange(val => {this.password = val;})Toggle({ type: ToggleType.Checkbox }).onChange((isChecked) => {if (isChecked) {promptAction.showToast({ message: "记住账号密码" })} else {promptAction.showToast({ message: "不记住密码" })}}).alignRules({top: { anchor: 'password', align: VerticalAlign.Bottom },left: { anchor: 'password', align: HorizontalAlign.Start }}).height(15).margin({top: 80, left: 33}).id('isRecord')Text('记住密码').fontColor("#999999").fontSize(12).height(15).margin({top: 80,left: 6}).alignRules({top: { anchor: 'password', align: VerticalAlign.Bottom },left: { anchor: 'isRecord', align: HorizontalAlign.End }}).id('tvRecord')Button('登录', { type: ButtonType.Capsule, stateEffect: true }).onClick(() => {this.dialog.open()animateTo({ duration: 10000, curve: Curve.LinearOutSlowIn }, () => { //显式动画this.alignIndex = (this.alignIndex + 1) % this.allAlign.length;this.itemAlign = this.allAlign[this.alignIndex]})}).alignRules({top: {anchor: 'tvRecord', align: VerticalAlign.Bottom},left: { anchor: 'etAccount', align: HorizontalAlign.Start },right: { anchor: 'etAccount', align: HorizontalAlign.End }}).height(47).margin({right: 23,top: 19,left: 23}).backgroundColor(0x00c250).type(ButtonType.Capsule).id('btCommit')}.width('100%').height('100%')}}pageTransition() {PageTransitionEnter({ type: RouteType.Push, duration: 1000, }).slide(SlideEffect.Right)PageTransitionEnter({ type: RouteType.Pop, duration: 1000, }).slide(SlideEffect.Left)PageTransitionExit({ type: RouteType.Push, duration: 1000 }).slide(SlideEffect.Left)PageTransitionExit({ type: RouteType.Pop, duration: 1000 }).slide(SlideEffect.Right)}
}@CustomDialog
struct TipDialog {dialogController: CustomDialogController;cancel: () => voidcommit: () => voidmsg: string;build() {Column() {Text('确定登录当前账号“' + this.msg + '”吗').fontColor(Color.Red).fontSize(44)Row() {Button('确定').type(ButtonType.Capsule).onClick(() => {this.commit()this.dialogController.close()})Button('取消').type(ButtonType.Capsule).onClick(() => {this.cancel()this.dialogController.close()})}}}
}@Component
struct Photo {@State imgListData: string[] = [];getAllImg() { //获取照片url集try {let photoSelectOptions = new picker.PhotoSelectOptions(); //媒体库选择器设置photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; //图片类型photoSelectOptions.maxSelectNumber = 5; //最多 选取五张let photoPicker = new picker.PhotoViewPicker; //初始化图片选择器photoPicker.select(photoSelectOptions).then(photoSelectResult => { //选择结果回调this.imgListData = photoSelectResult.photoUris;console.error(`imgListData size is ${this.imgListData.length}`)}).catch(err => {console.error(`select failed code is ${err.code}, msg : ${err.message}`)})} catch (err) {console.error(`load photo failed ${err.code}, msg: ${err.message}`)}}async aboutToAppear() {this.getAllImg(); //获取图片url}build() {}
}
import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image';
import picker from '@ohos.file.picker';
import router from '@ohos.router';@Entry
@Component
struct MyRouter {private tabsController: TabsController = new TabsController();@State currentIndex: number = 0;@Builder TabBuild(title: string, targetIndex: number, SelectedImg: Resource, normalImg: Resource) {Column() { //自定义tabImage(this.currentIndex == targetIndex ? SelectedImg : normalImg).size({ width: 25, height: 25 })Text(title).fontSize(16).fontColor(this.currentIndex == targetIndex ? 0x00c250 : 0x333333)}.width('100%').height(48).justifyContent(FlexAlign.Center).onClick(() => {console.error(`targetIndex is ${targetIndex}`)this.currentIndex = targetIndex;this.tabsController.changeIndex(this.currentIndex)})}@State image: PixelMap = undefined; //创建PixelMap状态变量private imgUrl: string = 'https://img1.baidu.com/it/u=3241660985,1063915045&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1194';loadImg() { //获取网络美女图片http.createHttp().request(this.imgUrl, (err, data) => {if (err) {console.error(`err is ${JSON.stringify(err)}`)} else {let code = data.responseCode;if (ResponseCode.ResponseCode.OK == code) {let res: any = data.result;let imageSource = image.createImageSource(res)let options = {alphaTye: 0, //透明度editable: false, //是否可编辑pixelFormat: 3, //像素格式scaleMode: 1, //缩略值size: { height: 100, wight: 100 } //创建图片大小}imageSource.createPixelMap(options).then(pixelMap => {this.image = pixelMap;})}}})}aboutToAppear() {// this.context = getContext();this.loadImg()}settings: RenderingContextSettings = new RenderingContextSettings(true)context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)img: ImageBitmap = new ImageBitmap('../../../resources/base/media/ic_hm_logo.svg')scroller: Scroller = new Scroller();@State _50: number = vp2px(50)@State _100: number = vp2px(100)@State _85: number = vp2px(85)@State _15: number = vp2px(15)@State _: number = vp2px(50)build() {Tabs({barPosition: BarPosition.End,controller: this.tabsController}) { //end start  首尾位置设置   controller 绑定tabs的控制器TabContent() { //内容页面组件MyNavigation().backgroundColor(0xf7f7f7)}.tabBar(this.TabBuild('首页', 0, $r('app.media.ic_hm_home_selected'), $r('app.media.ic_hm_home_normal')))TabContent() {Image(this.image).height('100%').width('100%')}.tabBar(this.TabBuild('直播', 1, $r('app.media.ic_hm_living_selected'), $r('app.media.ic_hm_living_normal')))TabContent() {Scroll(this.scroller) {Column() {Row() {Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.Contain) //等比缩放，图片完全显示.margin(15).overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 30 } }).colorFilter([ //添加滤镜效果1, 1, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 1, 0]).syncLoad(true) //同步加载图片.onComplete(msg => {if (msg) {console.error(`widthVal = ${msg.width}\n height = ${msg.height} \n componentW = ${msg.componentWidth} \n status = ${msg.loadingStatus}`)}}).onError(() => {console.error('err')})Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.Cover) //等比缩放， 图片显示部分.margin(15).overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.Auto) //自适应显示.margin(15)}Row() {Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.Fill) //填充显示，不保持等比缩放.renderMode(ImageRenderMode.Template) //图片渲染模式.margin(15).overlay('fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image(this.imgUrl).sourceSize({ //设置图片解码尺寸width: 65, height: 40}).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.ScaleDown) //保持原宽高比 等比缩放或不变.objectRepeat(ImageRepeat.XY) //设置图片在xy轴上重复显示.margin(15).overlay('scaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 30 } })Image(this.imgUrl).width('30%').height('20%').border({ width: 1 }).objectFit(ImageFit.None) //保持图片原尺寸.interpolation(ImageInterpolation.High) //图片插值，抗锯齿，使图片看着更清晰.margin(15).overlay("none", { align: Alignment.Bottom, offset: { x: 0, y: 30 } })}}}.width('100%').height('100%')}.tabBar(this.TabBuild('朋友圈', 2, $r('app.media.ic_hm_friend_selected'), $r("app.media.ic_hm_friend_normal")))TabContent() {Canvas(this.context).width('100%').height('100%').backgroundColor(Color.Yellow).onReady(() => {this.offContext.drawImage(this.image, 110, 400, 130, 130)let imageData = this.offContext.getImageData(150, 450, 130, 130)this.offContext.putImageData(imageData, 130, 130)let img = this.offContext.transferToImageBitmap();this.context.transferFromImageBitmap(img) //.截图画图this.context.beginPath()this.context.rect(110, 10, 210, 110)this.context.stroke()this.context.font = '46px'this.context.fillText('矩形', 120, 20) //画矩形this.context.beginPath()this.context.arc(110, 150, 50, 0, 6.28)this.context.stroke()this.context.font = '56px'this.context.fillText('圆形', 120, 220) //画圆形this.context.beginPath()this.context.ellipse(110, 250, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2)this.context.stroke() //画椭圆形let line = this.context.createLinearGradient(110, 500, 110, 600)line.addColorStop(0, '#f00')line.addColorStop(0.5, '#ff0')line.addColorStop(1, '#f0f')this.context.fillStyle = linethis.context.fillRect(110, 500, 100, 100) //渐变色this.context.fillText('我是中华人民共和国的公民', 110, 500) //写字let path = new Path2D();path.moveTo(100, 100)path.lineTo(100, 150)path.lineTo(25, 150)path.lineTo(175, 150)path.lineTo(100, 150)path.lineTo(100, 200)path.lineTo(40, 200)path.lineTo(160, 200)path.lineTo(100, 200)path.closePath()this.context.strokeStyle = '#f00'this.context.lineWidth = 5this.context.stroke(path)let path2 = new Path2D();path2.moveTo(40, 215)path2.lineTo(160, 215)path2.lineTo(160, 335)path2.lineTo(40, 335)path2.lineTo(40, 215)this.context.stroke(path2) //再次画个“吉”})}.tabBar(this.TabBuild('画布', 3, $r('app.media.ic_hm_logo'), $r('app.media.icon')))TabContent() {Column() {Text('原始尺寸Circle')Circle({ width: 100, height: 100 }).fill(0x00c250)Row({ space: 10 }) {Column() {Text('shape内放大的Circle')Shape() {Rect({ width: 100, height: 100 }).fill(0xf7f7f7)Circle({ width: 150, height: 150 }).fill(0x00c250)}.viewPort({ x: 0, y: 0, width: 100, height: 100 }) //根据这个视口与宽高比进行放大shape内的组件大小.width(150).height(150)Path().width(100).height(100).commands(`M${this._50} 0 L${this._50} ${this._50} L0 ${this._50} L${this._100} ${this._50} L${this._50} ${this._50} L${this._50} ${this._100} L${this._15} ${this._100} L${this._85} ${this._100} L${this._50} ${this._100} Z`).fillOpacity(0) //实心不填充颜色.fill(Color.Red).stroke(Color.Red).strokeWidth(5)Polyline().width(100).height(100).stroke(Color.Red).strokeWidth(5).points([[10, 10], [90, 10], [90, 90], [10, 90], [10, 10]]).fillOpacity(0) //实心不填充颜色}}}}.tabBar(this.TabBuild('我的', 4, $r('app.media.ic_hm_my_selected'), $r('app.media.ic_hm_my_normal')))}.vertical(false) //tabs垂直与横向设置.scrollable(false) //禁止页面滑动.barMode((BarMode.Fixed)) //Fixed 固定    Scrollable  可以滑动，当tab多时用.onChange((index) => { //页面滑动监听console.error(`this is ${index}`)this.currentIndex = index;// this.tabsController.changeIndex(this.currentIndex)})}
}@Component
struct MyNavigation {private arr: number[] = [1, 2, 3];build() {Column() {Navigation() {TextInput({ placeholder: '请输入...' }).width('90%').height(40).backgroundColor('#ffffff').sharedTransition('input', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static })Image($r('app.media.ic_hm_logo')).width(300).height(300).sharedTransition('sharedTransition', { duration: 500, curve: Curve.Linear }).onClick(() => {router.back()})List({ space: 12 }) {ForEach(this.arr, item => {ListItem() {NavRouter() {Text("NavRouter" + item).width('100%').height(72).backgroundColor(Color.White).borderRadius(36).fontSize(16).fontWeight(500).textAlign(TextAlign.Center)NavDestination() {Text(`NavDestinationContent${item}`)}.title(`NavDestinationTitle${item}`)}}})}}.title('主标题').mode(NavigationMode.Stack).titleMode(NavigationTitleMode.Mini).menus([{ value: "", icon: './../../../resources/base/media/icon.png', action: () => {} },{ value: "", icon: './../../../resources/base/media/icon.png', action: () => {} }]).toolBar({ items: [{ value: 'func', icon: './../../../resources/base/media/icon.png', action: () => {} },{ value: 'func', icon: './../../../resources/base/media/icon.png', action: () => {} }] })}}pageTransition() {PageTransitionEnter({ type: RouteType.Push, duration: 1000, }).slide(SlideEffect.Right)PageTransitionEnter({ type: RouteType.Pop, duration: 1000, }).slide(SlideEffect.Left)PageTransitionExit({type: RouteType.Push, duration: 1000}).slide(SlideEffect.Left)PageTransitionExit({type: RouteType.Pop, duration: 1000}).slide(SlideEffect.Right)}
}

这篇关于ArkTS开发系列之导航 (2.7动画）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1089576。

相关文章

Eclipse+ADT与Android Studio开发的区别

Eclipse+ADT与Android Studio开发的区别

下文的EA指Eclipse+ADT,AS就是指Android Studio。 就编写界面布局来说AS可以边开发边预览（所见即所得,以及多个屏幕预览），这个优势比较大。AS运行时占的内存比EA的要小。AS创建项目时要创建gradle项目框架，so,创建项目时AS比较慢。android studio基于gradle构建项目，你无法同时集中管理和维护多个项目的源码，而eclipse ADT可以同时打开
阅读更多...
js+css二级导航

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con
阅读更多...
Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

st.area_chart 显示区域图。 这是围绕 st.altair_chart 的语法糖。主要区别在于该命令使用数据自身的列和指数来计算图表的 Altair 规格。因此，在许多 "只需绘制此图 "的情况下，该命令更易于使用，但可定制性较差。 如果 st.area_chart 无法正确猜测数据规格，请尝试使用 st.altair_chart 指定所需的图表。 Function signa
阅读更多...
JavaWeb系列二十: jQuery的DOM操作 下

JavaWeb系列二十: jQuery的DOM操作 下

jQuery的DOM操作 CSS-DOM操作多选框案例页面加载完毕触发方法作业布置jQuery获取选中复选框的值jQuery控制checkbox被选中jQuery控制(全选/全不选/反选)jQuery动态添加删除用户 CSS-DOM操作 获取和设置元素的样式属性: css()获取和设置元素透明度: opacity属性获取和设置元素高度, 宽度: height(), widt
阅读更多...
C语言入门系列：探秘二级指针与多级指针的奇妙世界

C语言入门系列：探秘二级指针与多级指针的奇妙世界

文章目录 一，指针的回忆杀1，指针的概念2，指针的声明和赋值3，指针的使用3.1 直接给指针变量赋值3.2 通过*运算符读写指针指向的内存3.2.1 读3.2.2 写 二，二级指针详解1，定义2，示例说明3，二级指针与一级指针、普通变量的关系3.1，与一级指针的关系3.2，与普通变量的关系,示例说明 4，二级指针的常见用途5，二级指针扩展到多级指针 小结 C语言的学习之旅中，二级
阅读更多...
WDF驱动开发-WDF总线枚举(一)

WDF驱动开发-WDF总线枚举(一)

支持在总线驱动程序中进行 PnP 和电源管理 某些设备永久插入系统，而其他设备可以在系统运行时插入和拔出电源。 总线驱动 必须识别并报告连接到其总线的设备，并且他们必须发现并报告系统中设备的到达和离开情况。 总线驱动程序标识和报告的设备称为总线的 子设备。 标识和报告子设备的过程称为 总线枚举。 在总线枚举期间，总线驱动程序会为其子 设备创建设备对象 。  总线驱动程序本质上是同时处理总线枚
阅读更多...
JavaWeb系列六: 动态WEB开发核心(Servlet) 上

JavaWeb系列六: 动态WEB开发核心(Servlet) 上

韩老师学生 官网文档为什么会出现Servlet什么是ServletServlet在JavaWeb项目位置Servlet基本使用Servlet开发方式说明快速入门- 手动开发 servlet浏览器请求Servlet UML分析Servlet生命周期GET和POST请求分发处理通过继承HttpServlet开发ServletIDEA配置ServletServlet注意事项和细节 Servlet注
阅读更多...
手把手教你入门vue+springboot开发（五）--docker部署

手把手教你入门vue+springboot开发（五）--docker部署

文章目录 前言一、前端打包二、后端打包三、docker运行总结 前言 前面我们重点介绍了vue+springboot前后端分离开发的过程，本篇我们结合docker容器来研究一下打包部署过程。 一、前端打包 在VSCode的命令行中输入npm run build可以打包前端代码，出现下图提示表示打包完成。 打包成功后会在前端工程目录生成dist目录，如下图所示： 把
阅读更多...
Sapphire开发日志 (十) 关于页面

Sapphire开发日志 (十) 关于页面

关于页面 任务介绍 关于页面用户对我组工作量的展示。 实现效果 代码解释 首先封装一个子组件用于展示用户头像和名称。 const UserGrid = ({src,name,size,link,}: {src: any;name: any;size?: any;link?: any;}) => (<Box sx={{ display: "flex", flexDirecti
阅读更多...
ROS2从入门到精通4-4：局部控制插件开发案例(以PID算法为例)

ROS2从入门到精通4-4：局部控制插件开发案例(以PID算法为例)

目录 0 专栏介绍1 控制插件编写模板1.1 构造控制插件类1.2 注册并导出插件1.3 编译与使用插件 2 基于PID的路径跟踪原理3 控制插件开发案例(PID算法)常见问题 0 专栏介绍 本专栏旨在通过对ROS2的系统学习，掌握ROS2底层基本分布式原理，并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。 🚀详情：《ROS2从入门到精通》 1 控制插
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2