欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

鴻蒙開源第三方組件之連續(xù)滾動(dòng)圖像組件功能

 更新時(shí)間：2021年04月29日 08:41:47   作者：HarmonyOS技術(shù)社區(qū)  
這篇文章主要介紹了鴻蒙開源第三方組件之連續(xù)滾動(dòng)圖像組件功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

基于安卓平臺(tái)的連續(xù)滾動(dòng)圖像組件ContinuousScrollableImageView（https://github.com/Cutta/ContinuousScrollableImageView），實(shí)現(xiàn)了鴻蒙化遷移和重構(gòu)，代碼已經(jīng)開源到（https://gitee.com/isrc_ohos/continuous-scrollable-image-view_ohos），歡迎各位開發(fā)者下載使用并提出寶貴意見！

背景

ContinuousScrollableImageView_ohos組件通過讓圖像連續(xù)滾動(dòng)，來實(shí)現(xiàn)動(dòng)畫效果。組件支持對(duì)圖像的滾動(dòng)效果進(jìn)行設(shè)置，包括：圖像源、縮放類型、持續(xù)時(shí)間和方向等。該組件提供動(dòng)態(tài)的視覺效果，可以用來開發(fā)應(yīng)用的背景等。

組件效果展示

ContinuousScrollableImageView_ohos組件庫中設(shè)置了飛機(jī)、云、山三種圖像：飛機(jī)的滾動(dòng)方向設(shè)置為“RIGHT”，向右側(cè)滾動(dòng)；云和山的滾動(dòng)方向設(shè)置為“LEFT”，向左滾動(dòng)。三者組合成一幅完整的、具有連續(xù)滾動(dòng)效果的動(dòng)畫圖像，如圖1所示。

圖1 ContinuousScrollableImageView_ohos組件運(yùn)行效果圖

Sample解析

Sample部分主要負(fù)責(zé)搭建整體的顯示布局，并實(shí)例化飛機(jī)、云、山三種圖像的對(duì)象。通過調(diào)用Library提供的接口，對(duì)三個(gè)對(duì)象的滾動(dòng)效果進(jìn)行屬性設(shè)置。想要實(shí)現(xiàn)圖1所示的動(dòng)畫效果，需要以下3個(gè)步驟：

步驟1. 導(dǎo)入ContinuousScrollableImageView類。

步驟2. 實(shí)例化類對(duì)象并設(shè)置各個(gè)對(duì)象的屬性。

步驟3. 將對(duì)象添加到整體顯示布局中。

下面我們來看一下每個(gè)步驟涉及的詳細(xì)操作。

1、導(dǎo)入ContinuousScrollableImageView類

import com.cunoraz.continuousscrollable.ContinuousScrollableImageView;

2、實(shí)例化類對(duì)象并設(shè)置各個(gè)對(duì)象的屬性

圖1中的動(dòng)畫效果需要實(shí)例化3個(gè)ContinuousScrollableImageView對(duì)象分別代指包含飛機(jī)、云、山三種圖像。

設(shè)置各對(duì)象屬性的方式有兩種：常用方式和Builder方式。常用方式是指通過對(duì)象單獨(dú)調(diào)用類接口的方式；Builder方式即建造者模式。用戶可根據(jù)個(gè)人需要，自行確定使用哪種方式設(shè)置對(duì)象屬性。此處為了證明兩種方式的有效性，飛機(jī)和云圖像采用常用方式設(shè)置屬性，山圖像采用Builder方式設(shè)置屬性。 ContinuousScrollableImageView對(duì)象的可設(shè)置屬性有4個(gè)，包括：滾動(dòng)方向、滾動(dòng)周期、縮放類型、圖像源。

（1）實(shí)例化飛機(jī)圖像的對(duì)象并進(jìn)行屬性設(shè)置

// 實(shí)例化對(duì)象
ContinuousScrollableImageView plane=new ContinuousScrollableImageView(this);
// 采用常用方式進(jìn)行屬性設(shè)置
LayoutConfig planeConfig=new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,0,LayoutConfig.UNSPECIFIED_ALIGNMENT,1);
plane.setLayoutConfig(planeConfig);
plane.setDirection(ContinuousScrollableImageView.RIGHT);  //設(shè)置滾動(dòng)方向向右
plane.setDuration(2500);   //設(shè)置滾動(dòng)周期
plane.setScaleType(ContinuousScrollableImageView.CENTER_INSIDE);  //設(shè)置縮放類型
plane.setResourceId(ResourceTable.Media_plane);  // 設(shè)置圖像源

（2）實(shí)例化云圖像的對(duì)象并進(jìn)行屬性設(shè)置

// 實(shí)例化對(duì)象
ContinuousScrollableImageView cloud=new ContinuousScrollableImageView(this);
// 采用常用方法進(jìn)行屬性設(shè)置
LayoutConfig cloudConfig=new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,0,LayoutConfig.UNSPECIFIED_ALIGNMENT,1);
cloud.setLayoutConfig(cloudConfig);
cloud.setDirection(ContinuousScrollableImageView.LEFT);   //設(shè)置滾動(dòng)方向向左
cloud.setDuration(4000);    //設(shè)置滾動(dòng)周期
cloud.setResourceId(ResourceTable.Media_cloud);    //設(shè)置圖像源

（3）實(shí)例化山圖像的對(duì)象并進(jìn)行屬性設(shè)置

LayoutConfig mountainConfig=new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,0,LayoutConfig.UNSPECIFIED_ALIGNMENT,1);
//采用Builder方式進(jìn)行對(duì)象創(chuàng)建和屬性設(shè)置
ContinuousScrollableImageView mountain=new ContinuousScrollableImageView.Builder(this.getAbility())
        .setDirection(ContinuousScrollableImageView.LEFT)    //設(shè)置方向向左
        .setDuration(6000)    //設(shè)置時(shí)間間隔
        .setResourceId(ResourceTable.Media_mountain)    //設(shè)置圖像源
        .build();
mountain.setLayoutConfig(mountainConfig);

3、對(duì)象添加到整體顯示布局中

layout.addComponent(cloud); //飛機(jī)對(duì)象添加到布局
layout.addComponent(mountain); //云對(duì)象添加到布局
layout.addComponent(mountain);  //山對(duì)象添加到布局

Library解析

Library向開發(fā)者提供ContinuousScrollableImageView類對(duì)象的啟動(dòng)接口和屬性設(shè)置接口。以圖1的效果為例，通過調(diào)用啟動(dòng)接口，可以讓飛機(jī)、云和山對(duì)象開始滾動(dòng)；通過調(diào)用屬性設(shè)置接口，可以改變上述對(duì)象的滾動(dòng)效果。由Sample部分可知，ContinuousScrollableImageView類對(duì)象的屬性設(shè)置有兩種方式，本節(jié)將揭示，不同屬性設(shè)置方式下屬性設(shè)置接口的功能實(shí)現(xiàn)也存在差異。

1、ContinuousScrollableImageView類對(duì)象啟動(dòng)接口

該接口的功能實(shí)現(xiàn)內(nèi)容較多，但主要邏輯較為清晰，主要可以分為四個(gè)部分：設(shè)置布局、創(chuàng)建數(shù)值動(dòng)畫、對(duì)不同的滾動(dòng)方向設(shè)置監(jiān)聽和啟動(dòng)動(dòng)畫。

(1)設(shè)置布局

圖2 兩個(gè)布局依次出現(xiàn)

如圖2所示，畫面中所有的ContinuousScrollableImageView類對(duì)象都需要具有循環(huán)滾動(dòng)的效果，以飛機(jī)為例：飛機(jī)滾動(dòng)至最右側(cè)時(shí)，逐漸顯示的部分需要在最左側(cè)重新出現(xiàn)。為此，設(shè)計(jì)了兩個(gè)布局：firstImage和secondImage，二者布局相同且循環(huán)顯示，其中一個(gè)布局顯示另一個(gè)布局消失的部分。

private void setImages() {
    ......
    firstImage = (Image) this.findComponentById(ResourceTable.Id_first_image);
    secondImage = (Image) this.findComponentById(ResourceTable.Id_second_image);
    firstImage.setImageAndDecodeBounds(resourceId);
    secondImage.setImageAndDecodeBounds(resourceId);
    setScaleType(scaleType);
}

(2)創(chuàng)建數(shù)值動(dòng)畫

飛機(jī)、云和山都是靜態(tài)的，想讓實(shí)現(xiàn)滾動(dòng)效果，需要借助動(dòng)畫類。此處采用的是數(shù)值動(dòng)畫的方式，來啟動(dòng)各對(duì)象。同時(shí)還需要設(shè)置動(dòng)畫的循環(huán)次數(shù)、線性變化、循環(huán)周期等屬性。

animator.setLoopedCount(AnimatorValue.INFINITE);  //動(dòng)畫無限重復(fù)
animator.setCurveType(Animator.CurveType.LINEAR);  //動(dòng)畫線性變化
animator.setDuration(duration);   //動(dòng)畫的持續(xù)時(shí)間

(3)對(duì)不同的滾動(dòng)方向設(shè)置監(jiān)聽

飛機(jī)、云和山都可以設(shè)置不同的滾動(dòng)方向，針對(duì)不同的方向設(shè)置不同的值動(dòng)畫監(jiān)聽，以飛機(jī)為例：當(dāng)飛機(jī)橫向滾動(dòng)時(shí)，通過設(shè)置firstImage和secondImage的橫坐標(biāo)變化，達(dá)到二者循環(huán)顯示的目的。當(dāng)飛機(jī)豎向滾動(dòng)動(dòng)，通過設(shè)置firstImage和secondImage的坐標(biāo)變化，達(dá)到二者循環(huán)顯示的目的。

switch (DEFAULT_ASYMPTOTE) {
    case HORIZONTAL:   // 橫向滾動(dòng)
        animator.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {       //值動(dòng)畫監(jiān)聽
            @Override
            public void onUpdate(AnimatorValue animatorValue, float v) {
                // firstImage和secondImage循環(huán)顯示算法
                float progress;
                if (DIRECTION_MULTIPLIER == 1)
                    progress = DIRECTION_MULTIPLIER * (v);
                else
                    progress = DIRECTION_MULTIPLIER * (-v);
                float width = DIRECTION_MULTIPLIER * (-firstImage.getWidth());
                float translationX = width * progress;
                firstImage.setTranslationX(translationX);  //設(shè)置firstImage的橫坐標(biāo)
                secondImage.setTranslationX(translationX - width); //設(shè)置secondImage的橫坐標(biāo)
            }
        });
        break;
......

(4)啟動(dòng)動(dòng)畫

動(dòng)畫啟動(dòng)后，飛機(jī)、云和山的坐標(biāo)就會(huì)發(fā)生變化，此時(shí)他們的動(dòng)畫效果就由靜態(tài)的變成滾動(dòng)的。

animator.start();      //動(dòng)畫啟動(dòng)

2、常用方式下屬性設(shè)置接口功能實(shí)現(xiàn)

飛機(jī)和云采用常用方式設(shè)置屬性，其屬性包含：滾動(dòng)周期、滾動(dòng)方向、圖像源、圖像縮放類型。各接口的功能實(shí)現(xiàn)較為簡(jiǎn)單，值得注意的是，在滾動(dòng)方向和滾動(dòng)周期功能實(shí)現(xiàn)中分別調(diào)用了啟動(dòng)接口，此處是為了適應(yīng)下文即將指出的Builder方式，具體原因?qū)⒃谙挛闹v述。若開發(fā)者只采用常用方式進(jìn)行屬性設(shè)置，可以將啟動(dòng)接口從滾動(dòng)方向和滾動(dòng)周期功能實(shí)現(xiàn)中分離出來，通過飛機(jī)或者云的對(duì)象單獨(dú)調(diào)用。

//設(shè)置滾動(dòng)周期
public void setDuration(int duration) {
    this.duration = duration;
    isBuilt = false;
    build();
}
//設(shè)置方向
public void setDirection(@Directions int direction) {
    this.direction = direction;
    isBuilt = false;
    setDirectionFlags(direction);
    build();
}
//設(shè)置圖像源
public void setResourceId(int resourceId) {
    this.resourceId = resourceId;
    firstImage.setImageAndDecodeBounds(this.resourceId);
    secondImage.setImageAndDecodeBounds(this.resourceId);
}
//設(shè)置圖像縮放類型
public void setScaleType(@ScaleType int scaleType) {
    if (firstImage == null || secondImage == null) {
        throw new NullPointerException();
    }
    Image.ScaleMode type = Image.ScaleMode.CENTER;
    switch (scaleType) {
	···
    }
    this.scaleType = scaleType;
    firstImage.setScaleMode(type);
    secondImage.setScaleMode(type);
}

3、Builder方式設(shè)置屬性

對(duì)山采用Builder方式進(jìn)行屬性設(shè)置，各屬性在功能實(shí)現(xiàn)時(shí)分別調(diào)用了常用方式下的屬性設(shè)置接口，但是缺少啟動(dòng)接口的調(diào)用。

為了在Builder方式下也能正常啟動(dòng)動(dòng)畫，常用方式下的滾動(dòng)方向和滾動(dòng)周期功能實(shí)現(xiàn)中包含了啟動(dòng)接口，這樣當(dāng)在Builder方式下調(diào)用上述接口時(shí)，就可以實(shí)現(xiàn)動(dòng)畫的啟動(dòng)。

public static final class Builder {
    private ContinuousScrollableImageView scrollableImage;
    public Builder(Ability ability) {
        scrollableImage = new ContinuousScrollableImageView(ability);
    }
    //設(shè)置滾動(dòng)周期
    public Builder setDuration(int duration) {
        scrollableImage.setDuration(duration);
        return this;
    }
    //設(shè)置圖像源
    public Builder setResourceId(int resourceId) {
        scrollableImage.setResourceId(resourceId);
        return this;
    }
   //設(shè)置滾動(dòng)方向
    public Builder setDirection(@Directions int direction) {
        scrollableImage.setDirection(direction);
        return this;
    }
    //設(shè)置縮放類型
    public Builder setScaleType(@ScaleType int scaleType) {
        scrollableImage.setScaleType(scaleType);
        return this;
    }
    public ContinuousScrollableImageView build() {
        return scrollableImage;
    }
}

項(xiàng)目貢獻(xiàn)人

劉磊 鄭森文 朱偉 陳美汝 王佳思 張馨心

作者：朱偉ISRC想了解更多內(nèi)容，請(qǐng)?jiān)L問51CTO和華為合作共建的鴻蒙社區(qū)：https://harmonyos.51cto.com

到此這篇關(guān)于鴻蒙開源第三方組件之連續(xù)滾動(dòng)圖像組件功能的文章就介紹到這了,更多相關(guān)鴻蒙開源第三方組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論