【HarmonyOS学习】动画

页面分类动画

在这里插入图片描述

显示动画

function animateTo(value: AnimateParam, event: () => void): void;

代码如下:(实现属性变化引发的动画)

@Entry
@Component
struct Animate_Page1 {@State boxWidth: number = 100;@State boxHeight: number = 100;@State flag: boolean = true;build() {Stack({ alignContent: Alignment.BottomEnd }) {Column() {Row() {}.width(this.boxWidth).height(this.boxHeight).backgroundColor(Color.Red)}.height('100%').width('100%').justifyContent(FlexAlign.Center)Button("动画").width(50).height(50).margin(20).onClick(() => {animateTo({duration: 1000 //动画时间}, () => {if (this.flag) {this.boxWidth = 240;this.boxHeight = 240;} else {this.boxWidth = 100;this.boxHeight = 100;}this.flag = !this.flag;})})}.width('100%')}
}

常见属性

  • duration:动画执行时间

  • iterations:动画播放次数,-1表示无限次播放

  • curve:播放曲线

  • playMode:动画播放模式

  • delay:动画延迟播放时间

属性动画

使用animation属性去定义动画的属性,需要注意的点是,如果在animation方法后定义的属性,在改变时将不会触发动画。

@Entry
@Component
struct Animate_Page2 {@State boxWidth: number = 100;@State boxHeight: number = 100;@State flag: boolean = true;build() {Stack({ alignContent: Alignment.BottomEnd }) {Column() {Row() {}.width(this.boxWidth).height(this.boxHeight).backgroundColor(Color.Red).animation({duration: 1000})}.height('100%').width('100%').justifyContent(FlexAlign.Center)Button("动画").width(50).height(50).margin(20).onClick(() => {if (this.flag) {this.boxWidth = 240;this.boxHeight = 240;} else {this.boxWidth = 100;this.boxHeight = 100;}this.flag = !this.flag;})}.width('100%')}
}

常见属性

  • duration:动画执行时间

  • iterations:动画播放次数,-1表示无限次播放

  • curve:播放曲线

  • playMode:动画播放模式

  • delay:动画延迟播放时间

弹簧曲线动画(springCurve属性)

实现组件的左右抖动

import curves from '@ohos.curves';@Entry
@Component
struct Animate_Page3 {@State message: string = '登录框';@State translateX: number = 0;@State translateY: number = 0;jumpWithSpeed(velocity: number) {this.translateX = -10;animateTo({duration: 2000,//速度(velocity)质量(mass)刚度(stiffness)阻尼(damping)curve: curves.springCurve(velocity, 1, 1, 1)}, () => {this.translateX = 0;})}build() {Column() {Row() {Text(this.message).fontSize(40).width('100%').textAlign(TextAlign.Center)}.width(200).height(200).backgroundColor(Color.Gray).margin({top: 20,bottom: 50}).translate({x: this.translateX,y: this.translateY})Row() {Button("jump10").width(100).onClick(() => {this.jumpWithSpeed(10)})Button("jump200").width(100).onClick(() => {this.jumpWithSpeed(200)})}.justifyContent(FlexAlign.SpaceAround).width('100%')}.height('100%').width('100%')}
}

路径动画(motionPath属性)

需要在改变的外层轮廓添加animation属性,才能实现。需要注意点坐标需要乘2.

@Entry
@Component
struct Animate_Page4 {@State message: string = 'Hello World';@State flag: boolean = true;build() {Column() {Row() {Text(this.message).fontSize(20).width('100%').textAlign(TextAlign.Center)}.width(100).height(100).backgroundColor(Color.Gray).margin(10).onClick(() => {this.flag = !this.flag;}).motionPath({path: "M start.x start.y L10 400 L400 400 Lend.x end.y",from: 0,to: 1,rotatable: false//控制组件是否沿运动方向旋转})}.height('100%').width('100%').alignItems(this.flag ? HorizontalAlign.Start : HorizontalAlign.End).animation({duration: 2000})}
}

页面间动画-放大缩小视图

关键属性:sharedTransition属性

sharedTransition属性中的type类型包含Exchange和Static两种,详细简介如下图:
在这里插入图片描述
实现两个页面之间的图片放大缩小的方式跳转

Animate_Page5:

import router from '@ohos.router';@Entry
@Component
struct Animate_Page5 {@State message: string = 'Hello World';build() {Column() {Image($r('app.media.app_icon')).width(50).height(50).margin({top: 30,bottom: 30}).sharedTransition("icon1", {duration: 1000,type: SharedTransitionEffectType.Exchange})Button("点我跳转").width(200).fontSize(20).fontColor(Color.White).onClick((event: ClickEvent) => {router.pushUrl({url: "pages/Animate_Page5_Image"})})}.height('100%').width('100%')}
}

Animate_Page5_Image:

import router from '@ohos.router';@Entry
@Component
struct Animate_Page5_Image {@State message: string = 'Hello World';build() {Column() {Image($r('app.media.app_icon')).width(50).height(50).onClick(() => {router.back();}).sharedTransition("icon1")}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}

在这里插入图片描述

页面转场动画

可以设置转场动画方向和透明度等属性

pageTransition() {//页面打开时候的动画PageTransitionEnter({}).onEnter((type: RouteType, progress: number) => {})//页面离开时候的动画PageTransitionExit({}).onExit((type: RouteType, progress: number) => {})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/46833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第一节Linux常见指令

目录 1.Linux下基本指令 ls指令 pwd 命令 cd 指令 知识点:理解树形结构 touch 指令 mkdir指令(重要) rmdir指令 && rm指令(重要) 知识点:ls file* 可以找到当前目录下任何以file开头的文件​编辑 知识点:热键 man指令()重要 补充知识点:nano cp…

前端程序员应该往全栈方向发展吗?还是坚守前端?

作者:寒蝉(知乎) 顺便吆喝一声,技术大厂,内推捞人,前/后端or测试←感兴趣 要求学历:全日制统招本科(非学院派即可): --加班偶尔较多,但周末加班两…

Android NDK开发之震动服务客户端编写程序(C++)

一、背景 最近有个小伙伴问我可不可以写一个可执行程序(C/C) 来实现Android设备的震动的功能。 作为一个多年的Android开发者,我觉得这是可以实现的。 但是由于过去我一直做App开发,也就把这个实现过程想简单了。 经过了几天的折腾,终于算是…

港股指数实时行情API接口

港股 指数 实时 行情 API接口 # Restful API https://tsanghi.com/api/fin/index/HKG/realtime?token{token}&ticker{ticker}指定指数代码,获取该指数的实时行情(开、高、低、收、量)。 更新周期:实时。 请求方式&#xff1a…

vue router 切换路由的时候,页面的动画效果,使页面切换好看,以及控制有的页面使用切换路由特效,有的页面不用

一、使用切换效果 在router文件中 useTransition: true代表需要动画 meta: { title: “新开卡预填表单”, keepAlive: true, useTransition: true }, [{path: "/",name: "Home",meta: {title: "首页",keepAlive: true,useTransition: false},c…

给你的博客添加数据统计功能

20.数据统计 我们可以给博客添加统计功能,这里以百度统计和谷歌统计为例。 ‍ 百度统计 ‍ 添加网站 登陆百度统计后台:百度统计——一站式智能数据分析与应用平台,并登录,然后进入产品: ‍ 在使用设置–网站列…

图解KMP算法,带你彻底吃透KMP

模式串匹配——KMP算法 KMP算法一直是一个比较难以理解的算法,本篇文章主要根据《大话数据结构》中关于KMP算法的讲解,结合自己的思考,对于KMP算法进行一个比较详细的解释。 由于博主本人水平有限,难免会出现一些错误。如果发现…

C语言课程回顾:十、C语言之 指针

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 C语言之 指针 10 指针10.1 地址指针的基本概念10.2 变量的指针和指向变量的指针变量10.2.1 定义一个指针变量10.2.2 指针变量的引用10.2.3 指针变量作为函数参数10.2.4 指针变…

电脑远程开关机

1. 远程开机 参考:https://post.smzdm.com/p/664774/ 1.1 Wake On LAN - 局域网唤醒(需要主板支持,一般都支持) 要使用远程唤醒,有几种方式:使用类似向日葵开机棒(很贵)、公网ip&…

MongoDB教程(六):mongoDB复制副本集

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、MongoD…

使用Bind提供的域名解析服务

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 目录 一、DNS域名解析服务 二、安装Bind服务程序 1、正向解析 2、反向解析 三、部署从服务器 四、安全的加密传输 五、部署缓存服务器 六、分…

浅析班组建设在企业发展中的重要作用

众所周知,企业的成功与否往往取决于其内部管理的精细化和团队的高效协作。而班组作为企业最基层的管理单元,其建设质量直接关系到企业的整体运营效率和竞争力。今天,深圳天行健企业管理咨询公司将从多个维度分析班组建设在企业发展中的重要作…

【Python】深入了解 defaultdict:轻松处理默认值与复杂数据结构

文章目录 1. 深入理解 Python 中的 defaultdict:简化数据结构处理的利器2. defaultdict 基础概念3. 创建 defaultdict 实例3.1 基本用法3.2 使用其他工厂函数 4. defaultdict 的应用场景4.1 计数器4.2 分组数据 5. defaultdict 的高级用法5.1 嵌套 defaultdict5.2 自…

为什么流程图在项目管理中如此重要?

在我们的日常学习生活中,是不是感觉工作复杂繁琐,知识杂乱无章呢?那么流程图能够完美的解决这个问题,本文将会用一篇文章告诉你什么是流程图,流程图简单来说就是一种以图形方式表示算法、工作流程或过程的图表&#xf…

云服务器重置密码后,xshell远程连接不上,重新启用密码登录方式

云服务器重置密码后 ,xshell连接出现不能使用密码登录 解决方案:以下来自阿里云重新启用密码登录方式帮助文档 为轻量应用服务器创建密钥且重启服务器使密钥生效后,服务器会自动禁止使用root用户及密码登录。如果您需要重新启用密码登录方式&…

数据结构-java中链表的存储原理及使用方式

目录 链表(线性表的链式存储) 代码实例:(链表构建,头插尾插) LinkedList LinkedList的使用: 1、构造方法 2、操作方法 LinkedList 和 ArrayList 的区别 链表(线性表的链式存储…

基于python的图像去水印

1 代码 import cv2 import numpy as npdef remove_watermark(image_path, output_path):# 读取图片image cv2.imread(image_path)# 转换为灰度图gray cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)# 使用中值滤波去除噪声median_filtered cv2.medianBlur(gray, 5)# 计算图像的梯…

【Python学习笔记】:Python爬取音频

【Python学习笔记】:Python爬取音频 背景前摇(省流可以不看): 人工智能公司实习,好奇技术老师训练语音模型的过程,遂请教,得知训练数据集来源于爬取某网页的音频。 很久以前看B站同济子豪兄的《…

实验三:图像的平滑滤波

目录 一、实验目的 二、实验原理 1. 空域平滑滤波 2. 椒盐噪声的处理 三、实验内容 四、源程序和结果 (1) 主程序(matlab) (2) 函数GrayscaleFilter (3) 函数MeanKernel (4) 函数MedFilter 五、结果分析 1. 空域平滑滤波 2. 椒盐噪声的处理…

【数据结构与算法 经典例题】判断二叉树是否对称

💓 博客主页:倔强的石头的CSDN主页 📝Gitee主页:倔强的石头的gitee主页 ⏩ 文章专栏:《数据结构与算法 经典例题》C语言 期待您的关注 目录 一、问题描述 二、解题思路 三、C语言实现代码 一、问题描述 给你一个二…