HarmonyOS4.0系统性深入开发09卡片使用动效能力

卡片使用动效能力

ArkTS卡片开放了使用动画效果的能力,支持显式动画、属性动画、组件内转场能力。需要注意的是,ArkTS卡片使用动画效果时具有以下限制:

名称参数说明限制描述
duration动画播放时长限制最长的动效播放时长为1秒,当设置大于1秒的时间时,动效时长仍为1秒。
tempo动画播放速度卡片中禁止设置此参数,使用默认值1。
delay动画延迟执行的时长卡片中禁止设置此参数,使用默认值0。
iterations动画播放次数卡片中禁止设置此参数,使用默认值1。

以下示例代码实现了按钮旋转的动画效果:

img

@Entry
@Component
struct AttrAnimationExample {
  @State rotateAngle: number = 0;

  build() {
    Column() {
      Button('change rotate angle')
        .onClick(() => {
          this.rotateAngle = 90;
        })
        .margin(50)
        .rotate({ angle: this.rotateAngle })
        .animation({
          curve: Curve.EaseOut,
          playMode: PlayMode.AlternateReverse
        })
    }.width('100%').margin({ top: 20 })
  }
}

卡片使用自定义绘制能力

ArkTS卡片开放了自定义绘制的能力,在卡片上可以通过Canvas组件创建一块画布,然后通过CanvasRenderingContext2D对象在画布上进行自定义图形的绘制,如下示例代码实现了在画布的中心绘制了一个笑脸。

@Entry
@Component
struct Card {
  private canvasWidth: number = 0;
  private canvasHeight: number = 0;
  // 初始化CanvasRenderingContext2D和RenderingContextSettings
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Column() {
      Row() {
        Canvas(this.context)
          .margin('5%')
          .width('90%')
          .height('90%')
          .onReady(() => {
            console.info('[ArkTSCard] onReady for canvas draw content');
            // 在onReady回调中获取画布的实际宽和高
            this.canvasWidth = this.context.width;
            this.canvasHeight = this.context.height;
            // 绘制画布的背景
            this.context.fillStyle = 'rgba(203, 154, 126, 1.00)';
            this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
            // 在画布的中心绘制一个红色的圆
            this.context.beginPath();
            let radius = this.context.width / 3
            let circleX = this.context.width / 2
            let circleY = this.context.height / 2
            this.context.moveTo(circleX - radius, circleY);
            this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true);
            this.context.closePath();
            this.context.fillStyle = 'red';
            this.context.fill();
            // 绘制笑脸的左眼
            let leftR = radius / 4
            let leftX = circleX - (radius / 2)
            let leftY = circleY - (radius / 3.5)
            this.context.beginPath();
            this.context.arc(leftX, leftY, leftR, 0, Math.PI, true);
            this.context.strokeStyle = '#ffff00'
            this.context.lineWidth = 10
            this.context.stroke()
            // 绘制笑脸的右眼
            let rightR = radius / 4
            let rightX = circleX + (radius / 2)
            let rightY = circleY - (radius / 3.5)
            this.context.beginPath();
            this.context.arc(rightX, rightY, rightR, 0, Math.PI, true);
            this.context.strokeStyle = '#ffff00'
            this.context.lineWidth = 10
            this.context.stroke()
            // 绘制笑脸的嘴巴
            let mouthR = radius / 2.5
            let mouthX = circleX
            let mouthY = circleY + (radius / 3)
            this.context.beginPath();
            this.context.arc(mouthX, mouthY, mouthR, Math.PI, 0, true);
            this.context.strokeStyle = '#ffff00'
            this.context.lineWidth = 10
            this.context.stroke()
          })
      }
    }.height('100%').width('100%')
  }
}

运行效果如下图所示。

点击放大

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

5天一更新的卫星影像数据来自哪里?

这里我们就来分享一下,5天一更新的卫星影像源来自哪里。 哥白尼计划 在开始讲卫星影像数据源时,我们先来了解一下什么是哥白尼计划。 哥白尼计划(Copernicus Programme),又称全球环境与安全监测计划(Glo…

用通俗易懂的方式讲解大模型:LangChain Agent 原理解析

LangChain 是一个基于 LLM(大型语言模型)的编程框架,旨在帮助开发人员使用 LLM 构建端到端的应用程序。它提供了一套工具、组件和接口,可以简化创建由 LLM 和聊天模型提供支持的应用程序的过程。 LangChain 由几大组件构成&#…

【前端技术】LocalForage数据存储

✨专栏介绍 在当今数字化时代,Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序,就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术,以及各种框架、库和工具…

pytorch01:概念、张量操作、线性回归与逻辑回归

目录 一、pytorch介绍1.1pytorch简介1.2发展历史1.3pytorch优点 二、张量简介与创建2.1什么是张量?2.2Tensor与Variable2.3张量的创建2.3.1 直接创建torch.tensor()2.3.2 从numpy创建tensor 2.4根据数值创建2.4.1 torch.zeros()2.4.2 torch.zeros_like()2.4.3 torch…

windTerm 连接一段时间之后自动断开

默认是关闭会话空闲保活功能的,如所连接的SSH服务没做连接保活, 就很可能超时自动断开 开启会话保活 在 会话 -> 首选项 -> Default Session Settings -> SSH -> 连接 -> 发送空包以保持会话活动 设置15,即15秒自动发空包保…

YOLOv8改进 添加可变形注意力机制DAttention

一、Deformable Attention Transformer论文 论文地址:arxiv.org/pdf/2201.00520.pdf 二、Deformable Attention Transformer注意力结构 Deformable Attention Transformer包含可变形注意力机制,允许模型根据输入的内容动态调整注意力权重。在传统的Tra…

pytorch03:transforms常见数据增强操作

目录 一、数据增强二、transforms--Crop裁剪2.1 transforms.CenterCrop2.2 transforms.RandomCrop2.3 RandomResizedCrop2.4 FiveCrop和TenCrop 三、transforms—Flip翻转、旋转3.1RandomHorizontalFlip和RandomVerticalFlip3.2 RandomRotation 四、transforms —图像变换4.1 t…

[Angular] 笔记 23:Renderer2 - ElementRef 的生产版本

chatgpt: Renderer2 简介 在 Angular 中,Renderer2 是一个服务,用于处理 DOM 操作的抽象层。它提供了一种安全的方式来操作 DOM,同时与平台无关,有助于维护应用程序的跨浏览器兼容性和安全性。 Renderer2 的作用是在 Angular 组…

【vim 学习系列文章 3.1 -- vim 删除 ^M】

请阅读【嵌入式开发学习必备专栏 之 VIM 专栏】 文章目录 ^M 来源^M 删除 ^M 来源 在 Vim 中打开文件时,您可能会遇到行尾的 ^M 字符,这通常是因为文件使用了 Windows 风格的回车换行符(CRLF),而不是 Unix/Linux 风格…

集合基础知识点

集合基础 1. 集合的由来 当 Java 程序中需要存放数据的时候,通常会定义变量来实现数据的存储,但是,当需要存储大量数据的时候该怎么办呢?这时首先想到的是数组,但是!数组只能存放同一类型的数据&#xff…

【计算机网络】第五,六章摘要重点

1.运输层协议概述 运输层提供的是进程之间的通信 2. 3.套接字指的是什么 ip地址端口号 4.每一条TCP语句唯一地被通信两端连接的两个端点 5.TCP传输如何实现 以字节为单位的滑动窗口 超时重传 选择确认 6.TCP流量控制和拥塞控制的区别 流量控制:点对点通信…

Android Studio如何创建尺寸大小及API通用的模拟器

目录 前言 一、操作步骤 二、总结 三、更多资源 前言 在开发移动应用程序的过程中,使用模拟器进行测试是一种常见和方便的方式。Android Studio是一款功能强大的集成开发环境,它提供了创建和管理模拟器的功能。在本文中,我们将介绍如何创…

XTU-OJ-1452-完全平方数-笔记

参考博客 XTU-OJ 1452-完全平方数 题意 输入一个奇数&#xff0c;使得 n*(2*an-1)/2是一个完全平方数&#xff0c;求满足条件的最小的a 1<n<1e9 先输入样例数&#xff0c;再输入n 输入 2 1 3 输出 0 2 代码 #include<stdio.h>#define N 1000000010int a…

SpringIOC之ApplicationObjectSupport

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

数据库视图

使用视图就是执行视图的select操作。 为什么要使用视图&#xff1f; 安全性&#xff1a;只开放表中的部分数据&#xff08;只能看到视图开放的列&#xff09;便捷性&#xff1a;可以将复杂的多表关联查询放到视图中&#xff0c;屏蔽底层的复杂性。 create view viewa_name as…

2023年03月20日_对李开复3月20日线下媒体会的解读

最近这个AI大模型 因为GPT4.0 ChatGPT 文心一言等等这些事情呢 一下子就被推到了风口浪尖 我们也做了来介绍相关的进展 国内呢也不断有一些大佬开始下场 包括王慧文、张朝阳、李彦宏什么的 都开始说自己要搞AI大模型 就在昨天呢 创新工厂的董事长兼CEO李开复 也发朋友…

2022第十届中国互联网测试开发大会(MTSC2022)-核心PPT资料下载

一、峰会简介 MTSC中国互联网测试开发大会 Make Tester Super Cool&#xff08;简称 MTSC&#xff09;是由国内最大的移动测试技术社区 TesterHome 发起的软件测试行业技术会议&#xff0c;大会以“软件质量保障体系和测试研发技术交流”为主要目的。MTSC 大会于 2015 年举办第…

产品经理学习-怎么写PRD文档

目录 瀑布流方法论介绍 产品需求文档&#xff08;PRD&#xff09;介绍 产品需求文档的基本要素 撰写产品需求文档 优先产品需求文档的特点 其他相关文档 瀑布流方法论介绍 瀑布流模型是一种项目的开发和管理的方法论&#xff0c;是敏捷的开发管理方式相对应的另一种方法…

前端算法之双指针之快慢指针(Floyd 判圈法)

双指针与快慢指针快慢指针&#xff08;Floyd 判圈法&#xff09; 简介推导 在链表中&#xff0c;快指针和慢指针都可以指向头节点&#xff0c;然后根据问题的要求进行移动。 快指针通常会比慢指针移动得更快&#xff0c;例如每次移动两步&#xff0c;而慢指针则每次移动一步。…

Linux之磁盘分区,挂载

Linux分区 分区介绍 对linux来说无论有几个分区&#xff0c;分给哪个目录使用&#xff0c;归根结底只有一个根目录&#xff0c;linux中每个分区都是用来组成整个文件系统的一部分。linux采用“载入"的处理方法&#xff0c;他的整个文件系统中包含一整套的文件和目录&…