前言：
各位同學(xué)大家好 慕爬，有段時(shí)間沒(méi)有給大家更新文章了或渤，最近在學(xué)習(xí)鴻蒙開(kāi)發(fā) 今天要講的內(nèi)容是動(dòng)畫。跟安卓里面的動(dòng)畫有點(diǎn)相似但是也有不同的地方 那么我們廢話不多說(shuō)正式開(kāi)始
準(zhǔn)備工作
華為鴻蒙系統(tǒng)開(kāi)發(fā)初體驗(yàn) ：http://www.reibang.com/p/f94c847c7fdc
: 效果圖
image.png
image.png
image.png
image.png
image.png
image.png
具體實(shí)現(xiàn)：
-
幀動(dòng)畫
幀動(dòng)畫是利用視覺(jué)暫留現(xiàn)象，將一系列靜止的圖片按序播放，給用戶產(chǎn)生動(dòng)畫的效果
-
在Project窗口罪塔，打開(kāi)“entry > src > main > resources > base > media”，添加一系列圖片至media目錄下养葵。
image.png
-
- 在graphic目錄下，新建“animation_element.xml”文件瘩缆，在XML文件中使用animation-list標(biāo)簽來(lái)配置圖片資源关拒，duration用來(lái)設(shè)置顯示時(shí)長(zhǎng)，單位為毫秒庸娱。oneshot表示是否只播放一次着绊。
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:oneshot="false">
<item ohos:duration="100" ohos:element="$media:01"/>
<item ohos:duration="100" ohos:element="$media:02"/>
<item ohos:duration="100" ohos:element="$media:03"/>
<item ohos:duration="100" ohos:element="$media:04"/>
<item ohos:duration="100" ohos:element="$media:05"/>
<item ohos:duration="100" ohos:element="$media:06"/>
<item ohos:duration="100" ohos:element="$media:07"/>
<item ohos:duration="100" ohos:element="$media:08"/>
<item ohos:duration="100" ohos:element="$media:09"/>
<item ohos:duration="100" ohos:element="$media:10"/>
<item ohos:duration="100" ohos:element="$media:11"/>
<item ohos:duration="100" ohos:element="$media:12"/>
</animation-list>
- 3 然后我們?cè)贏nimationFrameAbilitySlice 中來(lái)實(shí)現(xiàn)幀動(dòng)畫
package com.example.animation_demo.slice;
import com.example.animation_demo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.element.FrameAnimationElement;
public class AnimationFrameAbilitySlice extends AbilitySlice {
private FrameAnimationElement frameAnimationElement;
private DirectionalLayout componentContainer;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_animation_frame);
initAnimator();
initComponents();
}
private void initAnimator() {
//加載動(dòng)畫資源，生成動(dòng)畫對(duì)象熟尉。
frameAnimationElement = new FrameAnimationElement(getContext(), ResourceTable.Graphic_animation_element);
}
private void initComponents() {
componentContainer = (DirectionalLayout) findComponentById(ResourceTable.Id_frame_container);
Component startButton = findComponentById(ResourceTable.Id_start_animation_button);
startButton.setClickedListener(this::startAnimation);
Component component = new Component(getContext());
component.setWidth(500);
component.setHeight(500);
component.setBackground(frameAnimationElement);
componentContainer.addComponent(component);
}
private void startAnimation(Component component) {
frameAnimationElement.start();
}
@Override
protected void onStop() {
componentContainer.removeAllComponents();
}
}
我們通過(guò) FrameAnimationElement來(lái)加載動(dòng)畫資源 然后我們通過(guò) DirectionalLayout來(lái)裝載我們的 component（用來(lái)顯示動(dòng)畫的組件） 最后我們通過(guò) frameAnimationElement.start(); 開(kāi)始播放動(dòng)畫
我們需要在stop生命周期方法里面 frameAnimationElement.stop();來(lái)停止動(dòng)畫播放
0000000000011111111.20210729150034.63146485264099158326299374564633.gif
-
數(shù)值動(dòng)畫
AnimatorValue數(shù)值從0到1變化归露，本身與Component無(wú)關(guān)。開(kāi)發(fā)者可以設(shè)置0到1變化過(guò)程的屬性斤儿，例如：時(shí)長(zhǎng)剧包、變化曲線、重復(fù)次數(shù)等往果，并通過(guò)值的變化改變組件的屬性疆液，實(shí)現(xiàn)組件的動(dòng)畫效果。
布局文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<Component
ohos:id="$+id:value_animation_image"
ohos:height="70vp"
ohos:width="70vp"
ohos:background_element="#00ffff"
ohos:top_margin="20vp"/>
<Button
ohos:id="$+id:animator_spring_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Spring"
ohos:text_size="16vp"
ohos:top_margin="30vp"/>
<Button
ohos:id="$+id:animator_anticipate_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Anticipate"
ohos:text_size="16vp"
ohos:top_margin="30vp"/>
<Button
ohos:id="$+id:animator_cycle_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Cycle"
ohos:text_size="16vp"
ohos:top_margin="30vp"/>
<Button
ohos:id="$+id:animator_overshoot_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Overshoot"
ohos:text_size="16vp"
ohos:top_margin="30vp"/>
<Button
ohos:id="$+id:animator_smoothStep_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Smooth Step"
ohos:text_size="16vp"
ohos:top_margin="30vp"/>
<Button
ohos:id="$+id:animator_cubic_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Cubic Hermit"
ohos:text_size="16vp"
ohos:top_margin="30vp"/>
</DirectionalLayout>
我們?cè)诓季治募袑懥艘粋€(gè) Component 用來(lái)顯示動(dòng)畫的控件和幾個(gè)button用來(lái)測(cè)試
布局效果
image.png
我們定義一個(gè)方法通過(guò)傳入 curvyType 動(dòng)畫類型來(lái)方便不同數(shù)值所顯示動(dòng)畫效果類型
private void startValueAnimator(int curvyType) {
//創(chuàng)建數(shù)值動(dòng)畫對(duì)象
AnimatorValue animator = new AnimatorValue();
//動(dòng)畫時(shí)長(zhǎng)
animator.setDuration(2000);
//播放前的延遲時(shí)間
animator.setDelay(0);
//循環(huán)次數(shù)
animator.setLoopedCount(1);
//動(dòng)畫的播放類型
animator.setCurveType(curvyType);
//設(shè)置動(dòng)畫過(guò)程
animator.setValueUpdateListener(
(animatorValue, value) -> valueAnimationImage.setContentPosition((int) (700 * value),
valueAnimationImage.getContentPositionY()));
//開(kāi)始啟動(dòng)動(dòng)畫
animator.start();
}
具體調(diào)用
package com.example.animation_demo.slice;
import com.example.animation_demo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.components.Component;
public class AnimatorValueAbilitySlice extends AbilitySlice {
private Component valueAnimationImage;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_animator_value);
initComponents();
}
private void initComponents() {
valueAnimationImage = findComponentById(ResourceTable.Id_value_animation_image);
Component springButton = findComponentById(ResourceTable.Id_animator_spring_button);
springButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.SPRING));
Component anticipateButton = findComponentById(ResourceTable.Id_animator_anticipate_button);
anticipateButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.ANTICIPATE));
Component cycleButton = findComponentById(ResourceTable.Id_animator_cycle_button);
cycleButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.CYCLE));
Component overshootButton = findComponentById(ResourceTable.Id_animator_overshoot_button);
overshootButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.OVERSHOOT));
Component smoothStepButton = findComponentById(ResourceTable.Id_animator_smoothStep_button);
smoothStepButton.setClickedListener(component -> startValueAnimator(Animator.CurveType.SMOOTH_STEP));
Component cubicHermit = findComponentById(ResourceTable.Id_animator_cubic_button);
cubicHermit.setClickedListener(component -> startValueAnimator(Animator.CurveType.CUBIC_HERMITE));
}
private void startValueAnimator(int curvyType) {
AnimatorValue animator = new AnimatorValue();
animator.setDuration(2000);
animator.setDelay(0);
animator.setLoopedCount(1);
animator.setCurveType(curvyType);
animator.setValueUpdateListener(
(animatorValue, value) -> valueAnimationImage.setContentPosition((int) (700 * value),
valueAnimationImage.getContentPositionY()));
animator.start();
}
}
屬性動(dòng)畫
為Component的屬性設(shè)置動(dòng)畫是常見(jiàn)的需求陕贮，Java UI框架可以為Component設(shè)置某個(gè)屬性或多個(gè)屬性的動(dòng)畫堕油。
布局文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="horizontal_center"
ohos:orientation="vertical">
<Component
ohos:id="$+id:property_animation_image"
ohos:height="70vp"
ohos:width="70vp"
ohos:background_element="#00ffff"
ohos:top_margin="20vp"/>
<Button
ohos:id="$+id:animator_scale_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Scale"
ohos:text_size="16fp"
ohos:top_margin="30vp"/>
<Button
ohos:id="$+id:animator_rotate_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Rotate"
ohos:text_size="16fp"
ohos:top_margin="30vp"/>
<Button
ohos:id="$+id:animator_alpha_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Alpha"
ohos:text_size="16fp"
ohos:top_margin="30vp"/>
<Button
ohos:id="$+id:animator_translate_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:left_margin="24vp"
ohos:padding="10vp"
ohos:right_margin="24vp"
ohos:text="Translate"
ohos:text_size="16fp"
ohos:top_margin="30vp"/>
</DirectionalLayout>
布局預(yù)覽效果
image.png
我們?cè)诓季执a中寫一個(gè) Component 組件用來(lái)處理屬性動(dòng)畫顯示然后 寫了4個(gè)button 來(lái)觸發(fā)各種不同動(dòng)畫的展示
-
Scale 效果
private void startScaleAnimation(Component component) {
propertyAnimationImage.setScale(1, 1);
AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
animator.setCurveType(Animator.CurveType.ANTICIPATE_OVERSHOOT);
animator.scaleY(0.7f);
animator.scaleX(1.5f);
animator.setDuration(2000);
animator.setLoopedCount(2);
animator.start();
}
-
Rotate 效果
private void startRotateAnimation(Component component) {
propertyAnimationImage.setRotation(0);
AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
animator.setCurveType(Animator.CurveType.ANTICIPATE_OVERSHOOT);
animator.rotate(360);
animator.setDuration(2000);
animator.setLoopedCount(2);
animator.start();
}
-
Alpha 效果
private void startAlphaAnimation(Component component) {
propertyAnimationImage.setAlpha(1);
AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
animator.alpha(0.2f);
animator.setDuration(1000);
animator.setLoopedCount(2);
animator.start();
}
-
Translate 效果
private void startTranslateAnimation(Component component) {
AnimatorProperty animator = propertyAnimationImage.createAnimatorProperty();
animator.moveToX(0);
animator.setDuration(1000);
animator.setLoopedCount(2);
animator.start();
}
動(dòng)畫集合
如果需要使用一個(gè)組合動(dòng)畫，可以把多個(gè)動(dòng)畫對(duì)象進(jìn)行組合肮之，并添加到使用AnimatorGroup中掉缺。AnimatorGroup提供了兩個(gè)方法：runSerially() 和 runParallel()，分別表示動(dòng)畫按順序開(kāi)始和動(dòng)畫同時(shí)開(kāi)始
布局文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
ohos:height="0vp"
ohos:width="match_parent"
ohos:alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:padding="10vp"
ohos:top_margin="20vp"
ohos:weight="1">
<Component
ohos:id="$+id:target_image1"
ohos:height="60vp"
ohos:width="60vp"
ohos:background_element="#00ffff"/>
<Component
ohos:id="$+id:target_image2"
ohos:height="60vp"
ohos:width="60vp"
ohos:background_element="#00ffff"
ohos:left_margin="10vp"/>
<Component
ohos:id="$+id:target_image3"
ohos:height="60vp"
ohos:width="60vp"
ohos:background_element="#00ffff"
ohos:left_margin="10vp"/>
<Component
ohos:id="$+id:target_image4"
ohos:height="60vp"
ohos:width="60vp"
ohos:background_element="#00ffff"
ohos:left_margin="10vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:bottom_margin="50vp"
ohos:margin="24vp">
<Button
ohos:id="$+id:serially_animator_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:padding="10vp"
ohos:text="Serially Animator Group"
ohos:text_size="16vp"/>
<Button
ohos:id="$+id:parallel_animator_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:padding="10vp"
ohos:text="Parallel Animator Group"
ohos:text_size="16vp"
ohos:top_margin="20vp"/>
<Button
ohos:id="$+id:builder_animator_button"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_background"
ohos:padding="10vp"
ohos:text="Animator Group Builder"
ohos:text_size="16vp"
ohos:top_margin="20vp"/>
</DirectionalLayout>
</DirectionalLayout>
布局效果
image.png
布局代碼中我們寫了4個(gè) Component 來(lái)處理動(dòng)畫集合效果 以及配合寫了3個(gè)button 來(lái)觸發(fā)不同組合動(dòng)畫的效果
- 1動(dòng)畫組按照指定添加順序來(lái)執(zhí)行
private void startBuilderAnimator(Component component) {
AnimatorGroup.Builder animatorGroupBuilder = animatorGroup.build();
animatorGroupBuilder.addAnimators(targetAnimator1)
.addAnimators(targetAnimator2, targetAnimator3)
.addAnimators(targetAnimator4);
animatorGroup.start();
}
- 2動(dòng)畫組里面動(dòng)畫同時(shí)執(zhí)行
private void startParallelAnimator(Component component) {
animatorGroup.runParallel(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
animatorGroup.start();
}
- 3動(dòng)畫組里面動(dòng)畫按順序執(zhí)行
private void startSeriallyAnimator(Component component) {
animatorGroup.runSerially(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
animatorGroup.start();
}
完整代碼
package com.example.animation_demo.slice;
import com.example.animation_demo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorGroup;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.components.Component;
public class AnimatorGroupAbilitySlice extends AbilitySlice {
private AnimatorValue targetAnimator1;
private AnimatorValue targetAnimator2;
private AnimatorValue targetAnimator3;
private AnimatorValue targetAnimator4;
private AnimatorGroup animatorGroup;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_animator_group);
initComponents();
animatorGroup = new AnimatorGroup();
}
private void initComponents() {
Component targetImage1 = findComponentById(ResourceTable.Id_target_image1);
targetAnimator1 = getValueAnimator(targetImage1);
Component targetImage2 = findComponentById(ResourceTable.Id_target_image2);
targetAnimator2 = getValueAnimator(targetImage2);
Component targetImage3 = findComponentById(ResourceTable.Id_target_image3);
targetAnimator3 = getValueAnimator(targetImage3);
Component targetImage4 = findComponentById(ResourceTable.Id_target_image4);
targetAnimator4 = getValueAnimator(targetImage4);
findComponentById(ResourceTable.Id_serially_animator_button).setClickedListener(this::startSeriallyAnimator);
findComponentById(ResourceTable.Id_parallel_animator_button).setClickedListener(this::startParallelAnimator);
findComponentById(ResourceTable.Id_builder_animator_button).setClickedListener(this::startBuilderAnimator);
}
private void startBuilderAnimator(Component component) {
AnimatorGroup.Builder animatorGroupBuilder = animatorGroup.build();
animatorGroupBuilder.addAnimators(targetAnimator1)
.addAnimators(targetAnimator2, targetAnimator3)
.addAnimators(targetAnimator4);
animatorGroup.start();
}
private void startParallelAnimator(Component component) {
animatorGroup.runParallel(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
animatorGroup.start();
}
private void startSeriallyAnimator(Component component) {
animatorGroup.runSerially(targetAnimator1, targetAnimator2, targetAnimator3, targetAnimator4);
animatorGroup.start();
}
private AnimatorValue getValueAnimator(Component component) {
AnimatorValue animator = new AnimatorValue();
animator.setDuration(2000);
animator.setLoopedCount(0);
animator.setCurveType(Animator.CurveType.BOUNCE);
animator.setValueUpdateListener(
(animatorValue, value) -> component.setContentPosition(component.getContentPositionX(),
(int) (800 * value)));
return animator;
}
}
到此鴻蒙的集中常用動(dòng)畫已經(jīng)講完了
最后總結(jié)：
鴻蒙系統(tǒng)api里面提供了幀動(dòng)畫 數(shù)值動(dòng)畫 和屬性動(dòng)畫3中基礎(chǔ)動(dòng)畫 我們還可以利用官方提供動(dòng)畫集合幾種基礎(chǔ)的動(dòng)畫組合起來(lái)來(lái)實(shí)現(xiàn)更為復(fù)雜和炫酷的動(dòng)畫效果戈擒，有興趣同學(xué)可以私下多研究 這里篇幅有限我就不展開(kāi)講了眶明。最后希望我的文章能幫助到各位解決問(wèn)題 ，以后我還會(huì)貢獻(xiàn)更多有用的代碼分享給大家峦甩。各位同學(xué)如果覺(jué)得文章還不錯(cuò) 赘来，麻煩給關(guān)注和star现喳，小弟在這里謝過(guò)啦。
