【HarmonyOS】【JS】小白的鸿蒙学习之路2--小小的图片啊,动呀动起来

news2024/12/27 13:08:24

【关键字】

image组件、动画

【介绍】

今天和大家分享下,我在官网上学习的一篇Codelab。这篇帖子通过一个代码示例,实现image组件的平移、缩放、旋转和透明度变化效果。话不多说,我们一起学起来吧!

【成果展示】

GIF1.gif

【开发步骤】

1.新建工程的JS,如下图所示

cke_75600.png

2.工程的JS目录如下图所示

cke_83436.png

1)在工程目录中:i18n下存放多语言的json文件;

  • en-US.json:此文件定义了在英文模式下页面显示的变量内容。

  • zh-CN.json:此文件定义了在中文模式下页面显示的变量内容。

2)common.images下存放工程中使用的图片资源文件;

cke_13916.png

3)pages文件夹下存放多个页面,每个页面由hml、css和js文件组成。

  • index.hml:此文件定义了index页面的布局、index页面中用到的组件,以及这些组件的层级关系。

  • index.css:此文件定义了index页面的样式。

  • index.js:此文件定义了index页面的业务逻辑,比如数据绑定、事件处理等。

3.打开index.hml文件,删除默认代码,添加image组件和text组件,并添加对应的class,用于设置组件的显示效果,代码如下:

<div class="container">
    <image class="img img-translate" src="/common/images/cat.png"></image>
    <text class="text">平移</text>
    <image class="img img-rotate" src="/common/images/cat.png"></image>
    <text class="text">360度旋转</text>
    <image class="img img-rotateY" src="/common/images/cat.png"></image>
    <text class="text">Y旋转</text>
    <image class="img img-scale" src="/common/images/cat.png"></image>
    <text class="text">缩放</text>
    <image class="img img-opacity" src="/common/images/cat.png"></image>
    <text class="text">不透明</text>
</div>

4、上面所有的组件都定义了class属性,它对应的样式都定义在index.css中。这部分定义了整个页面中各个组件的样式。在index.css中先添加如下代码:

.container {
    background-color: yellowgreen;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*  动画以低速结束、设置动画在3秒内完成、等待0秒,然后开始动画、定动画应该播放无限次*/
.img {
    margin-top: 40px;
    height: 14%;
    width: 100%;
    animation-timing-function: 	ease-out;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
.text {
    font-size: 40px;
}

.img-translate {
    animation-name: translateAnim;
}
.img-rotate {
    animation-name: rotateAnim;
}
.img-rotateY {
    animation-name: rotateYAnim;
}
.img-scale {
    animation-name: scaleAnim;
}
.img-mixes {
    animation-name: mixesAnim;
}
.img-opacity {
    animation-name: opacityAnim;
}
/*从-100px平移到100px*/
@keyframes translateAnim {
    from {
        transform: translate(-100px);
    }
    to {
        transform: translate(100px);
    }
}
/*从0°旋转到360°*/
@keyframes rotateAnim {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/*沿Y轴旋转,从0°旋转到360°*/
@keyframes rotateYAnim {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}
/*从0倍缩放到1.2倍大小*/
@keyframes scaleAnim {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1.2);
    }
}
/*不透明度值从0变化到1*/
@keyframes opacityAnim {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

【经验总结】

一个小拓展,同时实现缩放、旋转和透明度变化效果

CSS:

.container {
    background-color: yellowgreen;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.img {
    margin-top: 40px;
    height: 90%;
    width: 100%;
    animation-timing-function: 	ease-out;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
.text {
    font-size: 40px;
}
.img-gathers {
    animation-name: gathersAnim ;
}
@keyframes gathersAnim {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1.2);
    }
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

效果展示:

GIF3.gif

【相关参考】

image组件学习:文档中心image组件

css语法参考:文档中心css语法

JS API动画样式参考:文档中心JS API动画样式

text是文本组件学习:文档中心text是文本组件

基础容器学习:https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-div-0000001333720917

JS UI框架学习:文档中心JS UI框架

优秀案例学习:https://developer.huawei.com/consumer/cn/codelabsPortal/serviceTypes/harmonyos-cn?ha_source=neibu&ha_sourceId=89000231

 欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh 

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

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

相关文章

FE_VUE路由 细致解读router/index.js的配置

1 安装vue-router插件 安装vue-router&#xff0c;命令&#xff1a;npm i vue-router 【npm i vue-router3】&#xff0c;在main.js 中引入路由文件&#xff1a; import router from ./router&#xff0c; 注意router 不要变且为小写&#xff1b;注册路由&#xff08;因为main…

商场室内地图导航如何实现?商场室内导航地图怎么做?

商场室内地图导航如何实现&#xff1f;现在&#xff0c;消费者的消费观念和消费心理日趋成熟&#xff0c;对于购物商场的要求也愈加挑剔。电子地图作为大家最喜闻乐见的高效应用形式&#xff0c;能够在顾客购物的过程中带来非常大的帮助和体验&#xff0c;对于在大型的综合商场…

抖音电商的新增量在哪里?

“抖音电商涨不动了&#xff0c;才提出做货架”&#xff0c;“抖音做不好货架”……去年&#xff0c;抖音电商提出做“全域兴趣电商”&#xff0c;当时业内外有鼓励&#xff0c;也有不看好的声音。一年过去&#xff0c;5月16日&#xff0c;抖音电商总裁魏雯雯回应了质疑&#x…

Python可视化工具分享

今天和大家分享几个实用的纯python构建可视化界面服务&#xff0c;比如日常写了脚本但是不希望给别人代码&#xff0c;可以利用这些包快速构建好看的界面作为服务提供他人使用。有关于库的最新更新时间和当前star数量。 1、 streamlit (23.3k Updated 2 hours ago) Streamlit…

看完这篇文章你就彻底懂啦{保姆级讲解}-----(I.MX6U驱动GPT定时器中断实现高精度延时) 2023.5.19

目录 前言整体文件结构源码分析&#xff08;保姆级讲解&#xff09;初始化延时函数部分&#xff1a;微秒(us)级延时部分毫秒(ms)级延时部分主函数main部分 编译下载结束语 前言 在上一讲过程中我们使用了EPIT定时器来实现了定时器中断&#xff0c;从而解决了按键消抖的问题。但…

ChatGPT与深度学习的完美融合:打造智能化推荐系统新时代

PNN | AutoRec | 推荐算法 NFM | ChatGPT | 深度学习 新技术如ChatGPT、LLM、AIGC等的兴起&#xff0c;使推荐系统拥有更强的学习和预测能力。然而&#xff0c;推荐算法仍然是深度学习推荐系统中不可或缺的关键技术。推荐算法和这些技术应相辅相成&#xff0c;相互补充。推荐…

五大向量数据库入门横评

本文内容节选自 Paxi.ai 文章分享&#xff0c;Paxi.ai是一个基于GPT-4打造的帮助用户快速使用AI的AI工具&#xff0c;对内容感兴趣的朋友可以上他们官网查看。 从OpenAI发布GPT以来&#xff0c;AI尤其以LLM为代表的项目发展迅速&#xff0c;相信大家已经了解到大语言模型的魅力…

apk 作为资源提供 aar 的过程

1&#xff1a;参考&#xff1a;Android将APK项目封装为SDK(AAR) https://blog.csdn.net/weixin_51522235/article/details/128216091 四大点&#xff1a;1: apply plugin:com.android.library 2:去掉&#xff1a;applicationId 3:去掉&#xff1a;applicationVariants.all…

MySQL:触发器、权限管理

一、学习目标 了解什么是触发器掌握创建触发器的方法掌握查看触发器的方法掌握触发器的使用技巧掌握删除触发器的方法熟练掌握使用触发器的方法和技巧了解什么是权限表掌握权限表的用法掌握账户管理的方法掌握权限管理的方法掌握访问控制的方法熟练掌握新建用户的方法和技巧了…

小程序加weui或者TDesign安装

WeUI样式库展示&#xff1a;https://weui.io/ 微信官方WeUI相关文档&#xff1a;https://wechat-miniprogram.github.io/weui/docs/ WeUI-wxss 项目地址&#xff1a;https://github.com/Tencent/weui-wxss 安装 &#xff0c;1.先安装node.js 2.建立或者打开已经有的项目。…

【SolVES 模型】生态系统服务功能社会价值评估(基于多源环境QGIS、PostgreSQL、ArcGIS、Maxent、R语言)

SolVES模型&#xff08;Social Values for Ecosystem Services&#xff09;全称为生态系统服务社会价值模型&#xff0c;是由美国地质勘探局和美国科罗拉多州立大学联合开发的一款地理信息系统应用程序&#xff0c;开发该模型的目的主要是对生态系统服务功能中的社会价值进行空…

敏捷与瀑布:哪种项目管理方法适合你的企业?

​良好的项目管理可以改变企业的工作流&#xff0c;在减少混乱因素的同时注入方向和组织性。 同时&#xff0c;"项目管理 "对每个人来说并不意味着完全相同的事情。在企业及其客户中&#xff0c;最重要的两种项目管理方法是敏捷和瀑布。而这两种风格之间的差异很大&…

Redis是单线程还是多线程?揭开性能之谜!

大家好&#xff0c;我是小米&#xff0c;在这个充满技术乐趣的小天地里&#xff0c;今天我们来探讨一个备受争议的话题——Redis是单线程还是多线程&#xff1f;这个问题一直困扰着Redis的用户&#xff0c;让我们一起揭开性能之谜吧&#xff01; Redis作为一款高性能键值存储系…

交换机故障恢复

通常情况下&#xff0c;可以为交换机设置enable密码来提供安全&#xff0c;在没有enable密码的情况下&#xff0c;无法对交换机修改任何配置&#xff0c;因此&#xff0c;在忘记enable密码的时候&#xff0c;就意味着无法改动交换机信息。但是&#xff0c;如果能够物理上接触到…

实施办公自动化系统需要注意什么?

办公自动化系统的好处很容易理解。几乎每个企业都会欢迎更高的准确性、效率和利润率。办公自动化这个过程似乎势不可挡&#xff0c;那么该如何实现和管理呢&#xff1f; 决定自动化的内容 在实施办公自动化系统之前&#xff0c;企业将需要花时间研究哪些具体的流程需要自动化…

Go语言核心编程-基本数据类型篇

第 3 章 Golang 变量 3.1 为什么需要变量 3.1.1一个程序就是一个世界 3.1.2变量是程序的基本组成单位 不论是使用哪种高级程序语言编写程序,变量都是其程序的基本组成单位&#xff0c;比如一个示意图&#xff1a; func getVal(numl int, num2 int) (int, int) {sum : num1 n…

【数字敏捷性】上海道宁与​SolarWinds为您提供全面的可观察性、IT 服务管理和数据库管理

SolarWinds Platform是 业界先进的统一监控 可观察性和服务管理平台 它是新一代SolarWinds 可观察性解决方案的基础 并提供了我们如何 为客户解决可观察性挑战的架构 网络管理工具 从配置和流量智能到 性能监控和拓扑映射 可以轻松查看、理解和解决问题 一种集成的多…

【数据结构】--单链表力扣面试题②反转链表

目录 法一&#xff1a;直接反转法 法二&#xff1a;头插法 题述&#xff1a;给你单链表的头结点head&#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 题目已知链表创建&#xff0c;并给了reverseList的函数头。 struct ListNode* reverseList(struct ListNode* he…

Maven属性与版本管理

文章目录 1 属性1.1 问题分析1.2 解决步骤步骤1:父工程中定义属性步骤2:修改依赖的version 2 配置文件加载属性步骤1:父工程定义属性步骤2:jdbc.properties文件中引用属性步骤3:设置maven过滤文件范围步骤4:测试是否生效 3 版本管理 在这一章节内容中&#xff0c;我们将学习两个…

ROS学习(1)——ROS1和ROS2的区别

因为机器人是一个系统工程&#xff0c;它包括了机械臂结构&#xff0c;电子电路&#xff0c;驱动程序&#xff0c;通信框架&#xff0c;组装集成&#xff0c;调试和各种感知决策算法等方面&#xff0c;任何一个人甚至是一个公司都不可能完成机器人系统的研发工作 。但是我们又希…