欧美一级特黄大片视频在线播放,免费视频一级a吞精,全集网 MP4

介紹

利用ArkUI組件不僅可以實(shí)現(xiàn)局部屬性變化產(chǎn)生的屬性動(dòng)畫(huà)，也可以實(shí)現(xiàn)父組件屬性變化引起子組件產(chǎn)生過(guò)渡效果式的全局動(dòng)畫(huà)即顯式動(dòng)畫(huà)。效果如圖所示：

環(huán)境搭建

軟件要求

[DevEco Studio]版本：DevEco Studio 3.1。
OpenHarmony SDK版本：API version 9。

硬件要求

開(kāi)發(fā)板類(lèi)型：[潤(rùn)和RK3568開(kāi)發(fā)板]。
OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建，本示例以RK3568開(kāi)發(fā)板為例，參照以下步驟進(jìn)行：

[獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
搭建燒錄環(huán)境。
1. [完成DevEco Device Tool的安裝]
2. [完成RK3568開(kāi)發(fā)板的燒錄](méi)
搭建開(kāi)發(fā)環(huán)境。
1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”），選擇JS或者eTS語(yǔ)言開(kāi)發(fā)。
3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
4. 鴻蒙開(kāi)發(fā)指導(dǎo)文檔：qr23.cn/FBD4cY點(diǎn)擊或者復(fù)制轉(zhuǎn)到。

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，完整代碼可以直接從gitee獲取。

├──entry/src/main/ets                // 代碼區(qū)
│  ├──common
│  │  └──constants
│  │     └──Const.ets                // 常量類(lèi)
│  ├──entryability
│  │  └──EntryAbility.ts             // 程序入口類(lèi)
│  ├──pages
│  │  └──Index.ets                   // 動(dòng)效頁(yè)面入口
│  ├──view
│  │  ├──AnimationWidgets.ets        // 動(dòng)畫(huà)組件
│  │  ├──CountController.ets         // 圖標(biāo)數(shù)量控制組件
│  │  └──IconAnimation.ets           // 圖標(biāo)屬性動(dòng)畫(huà)組件
│  └──viewmodel
│     ├──IconItem.ets                // 圖標(biāo)類(lèi)
│     ├──IconsModel.ets              // 圖標(biāo)數(shù)據(jù)模型
│     └──Point.ets                   // 圖標(biāo)坐標(biāo)類(lèi)
└──entry/src/main/resources          // 資源文件

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151450.png

頁(yè)面入口

頁(yè)面入口由AnimationWidgets（動(dòng)效組件）、CountController（動(dòng)效圖標(biāo)數(shù)量控制組件）組成。

其中CountController通過(guò)Slider滑動(dòng)控制quantity（動(dòng)效圖標(biāo)數(shù)量）；AnimationWidgets根據(jù)quantity展示相應(yīng)數(shù)量的圖標(biāo)，點(diǎn)擊組件按鈕后通過(guò)在animateTo的event閉包函數(shù)中改變mainFlag狀態(tài)，跟mainFlag相關(guān)的樣式屬性的變化都會(huì)產(chǎn)生動(dòng)畫(huà)效果，代碼如下所示：

// Index.ets
@Entry
@Component
struct Index {
  @State quantity: number = Common.IMAGES_MIN;
  @Provide iconModel: IconsModel = new IconsModel(this.quantity, Common.OFFSET_RADIUS);

  build() {
    Column() {
      // 動(dòng)畫(huà)組件
      AnimationWidgets({
        quantity: $quantity
      })
      // 圖標(biāo)數(shù)量控制組件
      CountController({
        quantity: $quantity
      })
    }
...
  }
}

CountController組件通過(guò)Slilder滑動(dòng)控制動(dòng)效圖標(biāo)的數(shù)量，最少3個(gè)圖標(biāo)，最多6個(gè)圖標(biāo)，示例代碼如下所示：

// CountController.ets
@Component
export struct CountController {
  @Link quantity: number;

  build() {
    Column() {
      Row() {
        Text($r('app.string.count'))
          .textStyle()

        Text(this.quantity)
          .textStyle()
      }
      ...

      Slider({
        value: this.quantity,
        min: Common.IMAGES_MIN,
        max: Common.IMAGES_TOTAL,
        step: 1,
        style: SliderStyle.InSet
      })
        .blockColor(Color.White)
        .selectedColor('#007DFF')
        .showSteps(true)
        .trackThickness($r('app.float.size_20'))
        .onChange((value: number) = > {
          this.quantity = value;
        })
        ...
    }
  }
}

顯式動(dòng)畫(huà)

點(diǎn)擊AnimationWidgets組件的中心圖標(biāo)，調(diào)用animateTo方法，在event回調(diào)方法中改變狀態(tài)，從而對(duì)組件本身產(chǎn)生縮放動(dòng)畫(huà)，和圖標(biāo)位置變化的動(dòng)畫(huà)效果，效果如下所示：

在animationTo的回調(diào)中修改mainFlag狀態(tài)，所有跟mainFlag狀態(tài)相關(guān)的屬性變化都會(huì)產(chǎn)生過(guò)渡動(dòng)畫(huà)效果。代碼如下所示：

// AnimationWidgets.ets
import { IconsModel } from '../viewmodel/IconsModel';
import { IconAnimation } from './IconAnimation';
import Common from '../common/constants/Const';
import IconItem from '../viewmodel/IconItem';

@Component
export struct AnimationWidgets {
  @State mainFlag: boolean = false;
  @Link @Watch('onQuantityChange') quantity: number;
  @Consume iconModel: IconsModel;

  onQuantityChange() {
    this.iconModel.addImage(this.quantity);
  }

  aboutToAppear() {
    this.onQuantityChange();
  }
    
  animate() {
    animateTo(
      {
        delay: Common.DELAY_10,
        tempo: Common.TEMPO,
        iterations: 1,
        duration: Common.DURATION_500,
        curve: Curve.Smooth,
        playMode: PlayMode.Normal
      }, () = > {
        this.mainFlag = !this.mainFlag;
      })
    }
    
  build() {
    Stack() {
      Stack() {
        ForEach(this.iconModel.imagerArr, (item: IconItem) = > {
          IconAnimation({
            item: item,
            mainFlag: $mainFlag
          })
        }, (item: IconItem) = > JSON.stringify(item.index))
      }
      .width(Common.DEFAULT_FULL_WIDTH)
      .height(Common.DEFAULT_FULL_HEIGHT)
      .rotate({
        x: 0,
        y: 0,
        z: 1,
        angle: this.mainFlag ? Common.ROTATE_ANGLE_360 : 0
      })
    
    Image(
      this.mainFlag
        ? $r("app.media.imgActive")
        : $r("app.media.imgInit")
    )
    .width($r('app.float.size_64'))
    .height($r('app.float.size_64'))
    .objectFit(ImageFit.Contain)
    .scale({
      x: this.mainFlag ? Common.INIT_SCALE : 1,
      y: this.mainFlag ? Common.INIT_SCALE : 1
    })
    .onClick(() = > {
      this.iconModel.reset();
      this.animate();
    })
    
    Text($r('app.string.please_click_button'))
      .fontSize($r('app.float.size_16'))
      .opacity(Common.OPACITY_06)
      .fontColor($r('app.color.fontGrayColor'))
      .fontWeight(Common.FONT_WEIGHT_500)
      .margin({
        top: $r('app.float.size_100')
      })
    }
    .width(Common.DEFAULT_FULL_WIDTH)
    .layoutWeight(1)
    
  }
}

屬性動(dòng)畫(huà)

組件的通用屬性發(fā)生變化時(shí)，可以創(chuàng)建屬性動(dòng)畫(huà)進(jìn)行漸變，提升用戶(hù)體驗(yàn)。示例效果如下所示：

當(dāng)組件由animation動(dòng)畫(huà)屬性修飾時(shí)，如果自身屬性發(fā)生變化會(huì)產(chǎn)生過(guò)渡動(dòng)畫(huà)效果。本示例中當(dāng)點(diǎn)擊小圖標(biāo)時(shí)會(huì)觸發(fā)自身clicked狀態(tài)的變化，所有跟clicked相關(guān)的屬性變化（如translate、rotate、scale、opacity）都會(huì)被增加動(dòng)畫(huà)效果。代碼如下所示：

// IconAnimation.ets
export struct IconAnimation {
  @Link mainFlag: boolean;
  @ObjectLink item: IconItem;

  build() {
    Image(this.item.image)
      .width(Common.ICON_WIDTH)
      .height(Common.ICON_HEIGHT)
      .objectFit(ImageFit.Contain)
      .translate(
          this.mainFlag
            ? { x: this.item.point.x, y: this.item.point.y }
            : { x: 0, y: 0 }
      )
      .rotate({
        x: 0,
        y: 1,
        z: 0,
        angle: this.item.clicked ? Common.ROTATE_ANGLE_360 : 0
      })
      .scale(
          this.item.clicked
          ? { x: Common.SCALE_RATIO, y: Common.SCALE_RATIO }
          : { x: 1, y: 1 }
      )
      .opacity(this.item.clicked ? Common.OPACITY_06 : 1)
      .onClick(() = > {
        this.item.clicked = !this.item.clicked;
      })
      .animation(
        {
          delay: Common.DELAY_10,
          duration: Common.DURATION_1000,
          iterations: 1,
          curve: Curve.Smooth,
          playMode: PlayMode.Normal
        }
      )
  }
}

根據(jù)圖標(biāo)數(shù)量計(jì)算圖標(biāo)位置代碼如下所示：

// IconsModel.ets
import Common from '../common/constants/Const';
import IconItem from './IconItem';
import Point from './Point';

const TWO_PI: number = 2 * Math.PI;

@Observed
export class IconsModel {
  public imagerArr: Array< IconItem > = [];
  private num: number = Common.IMAGES_MIN;
  private radius: number;

  constructor(num: number, radius: number) {
    this.radius = radius;
    this.addImage(num);
  }

  public addImage(num: number) {
    this.num = num;
    if (this.imagerArr.length == num) {
      return;
    }
    if (this.imagerArr.length > num) {
      this.imagerArr.splice(num, this.imagerArr.length - num);
    } else {
      for (let i = this.imagerArr.length; i < num; i++) {
        const point = this.genPointByIndex(i);
        this.imagerArr.push(new IconItem(i, Common.IMAGE_RESOURCE[i], false, point));
      }
    }

    this.refreshPoint(num);
  }

  public refreshPoint(num: number) {
    for (let i = 0; i < num; i++) {
      this.imagerArr[i].point = this.genPointByIndex(i);
    }
  }

  public genPointByIndex(index: number): Point {
    const x = this.radius * Math.cos(TWO_PI * index / this.num);
    const y = this.radius * Math.sin(TWO_PI * index / this.num);
    return new Point(x, y);
  }

  public reset() {
    for (let i = 0; i < this.num; i++) {
      if (this.imagerArr[i].clicked) {
        this.imagerArr[i].clicked = false;
      }
    }
  }
}

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴