哪些网站的做的好看的,简述建设iis网站的基本过程,html5做网站好吗,企业信息公示系统官网动画的原理是在一个时间段内#xff0c;多次改变UI外观#xff0c;由于人眼会产生视觉暂留#xff0c;所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧#xff0c;对应一次屏幕刷新#xff0c;而决定动画流畅度的一个重要指标就是帧率FPS#xff08;F… 动画的原理是在一个时间段内多次改变UI外观由于人眼会产生视觉暂留所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧对应一次屏幕刷新而决定动画流畅度的一个重要指标就是帧率FPSFrame Per Second即每秒的动画帧数帧率越高则动画就会越流畅。 ArkUI中产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律即曲线等参数。当属性值发生变化后按照动画参数从原来的状态过渡到新的状态即形成一个动画。 1、动画分类 2、常见动画的使用
通过改变元素的宽高、位置、布局等触发动画官方文档-动画
// 显式动画 https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-explicit-animation-0000001281480722
animateTo(value: AnimateParam, event: () void): void
// 属性动画 https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-animatorproperty-0000001333321185
animation(value: AnimateParam)
// 转场动画-必须和animateTo配合使用 https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-page-transition-animation-0000001281201178
transition(value: TransitionOptions)
transition({ type: TransitionType.All, scale: { x: 0, y: 0 } }) // 全部使用一种动画
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、矩阵动画的使用
这一块我们重点关注几个常用的属性
3.1 translate拖拽动画实现的主要属性
translate({x?: number, y?: number, z?: number}): Object当x,y坐标为0时则意味着每个元素按照各自的位置进行排列例如grid、list、Stack等。 因此我们可以根据元素的下标index通过一些算法来改变坐标的位置从而实现拖拽动画具体见代码
DOM的实现
// isStartDrag 为是否开始拖拽当开始拖拽时我们动态改变矩阵中元素的坐标
Grid() {ForEach(this.selected, (item: dataListType) {GridItem() {Text(item.text).blockTextStyle(this.blockWidth)}.translate({x: this.isStartDrag ? this.geyCoodXY(index).x : 0,y: this.isStartDrag? this.geyCoodXY(index).y : 0}).animation({duration: DURATION, // 动画时长curve: Curve.Linear, // 动画曲线iterations: 1, // 播放次数playMode: PlayMode.Normal // 动画模式})})
}
.columnsTemplate(1fr 1fr 1fr)
.columnsGap(16)
.rowsGap(16)
.editMode(true) //设置Grid是否进入编辑模式进入编辑模式可以拖拽Grid组件内部GridItem
.supportAnimation(true) // 开启动画坐标改变的算法 geyCoodXY(index) {const gridCol this.getGridCol()let x 0let y 0if(this.insterIndex ! -1) {if(index this.insterIndex) {// 判断是否需要换行// 需要取余如果等于0则需要换行需要进行下移和左移if(parseInt(((index) % gridCol).toString()) gridCol - 1) {// 判断是否为当前列的最后一个if(this.options.type object) {x x - this.blockWidth * (gridCol - 1) - 16 * (gridCol - 2) - 19y y this.blockHeight - 16.5} else {x x - this.blockWidth * (gridCol - 1) - 16 * (gridCol - 2) - 13y y this.blockHeight 18}} else {// 默认右移x x 16 this.blockWidth 1}}if(!this.isStartDrag) {x 0y 0}}return {x: x,y: y}}/*** 获取Grid高度计算是否需要1* 场景1当前数组data长度小于列colNum的长度* 场景2当前数组的长度等于拖拽前的长度 对数组长度%列长度区域不为0* */getGridNum(data) {let len data.lengthlet num 0if(len this.colNum) {num 1}if(parseInt((len % this.colNum).toString()) ! 0 this.editGridDataLength len) {num 1}return num}/*** 获取当前布局列数* 默认文本COL_TEXT4* 默认图文COL_IMAGE_TEXT3* */getGridCol() {return this.options.type object ? COL_IMAGE_TEXT : COL_TEXT}3.2 scale
缩放函数配合transform进行使用
scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object3.3 rotate
旋转函数
rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object3.4 transformPoint
坐标映射可以将当前的变换效果作用到一个坐标点上。
源码地址MeshObjectEdit 4、 注意点
4.1 Grid布局中的Item使用属性动画时只能使用自带的curve无法自定义 4.2 底层渲染问题 在开发拖拽动画时发现png的图片在拖拽结束后会出现图片闪动的不流畅问题改为svg图片解决。因此通过大量的对比验证确认为鸿蒙底层窜然问题。
