Directory:

1, the preface

2, the background,

3. Component effect display

4. Sample analysis

5. Library parsing

6, “Hongmeng Open source third-party components” series of articles collection

preface

Based on the android platform of continuous rolling image components ContinuousScrollableImageView (github.com/Cutta/Conti…

background

Continuous rolling ContinuousScrollableImageView_ohos components by making images, to achieve animation effects. Component allows you to set the scrolling effect of an image, including the image source, zoom type, duration, and direction. This component provides dynamic visuals that can be used to develop application backgrounds, etc.

Component Effect display

ContinuousScrollableImageView_ohos component library set up in plane, cloud, mountain three images: aircraft rolling direction is set to “RIGHT”, scroll to the RIGHT; Set the scroll direction of Cloud and Mountain to “LEFT” and scroll LEFT. The three are combined into a complete animated image with continuous rolling effect, as shown in Figure 1.

Figure 1 ContinuousScrollableImageView_ohos component running effect

The Sample analysis

The Sample part is mainly responsible for building the overall display layout and instantiating objects in three kinds of images: airplane, cloud and mountain. Properties are set for the scrolling effects of the three objects by calling the interface provided by the Library. To achieve the animation shown in Figure 1, there are three steps:

Step 1. Import ContinuousScrollableImageView class.

Step 2. Instantiate class objects and set the properties of each object.

Step 3. Add objects to the overall display layout.

Let’s take a look at the details involved in each step.

1, import ContinuousScrollableImageView class

import com.cunoraz.continuousscrollable.ContinuousScrollableImageView;
Copy the code

2. Instantiate class objects and set the properties of each object

The animation effects in figure 1 3 ContinuousScrollableImageView need to instantiate objects respectively for contains three types of image plane, cloud, mountain.

There are two ways to set the properties of each object: the common way and the Builder way. The common way is to call the class interface through the object alone; Builder mode is the Builder mode. Users can determine which method to set object properties based on personal needs. In order to prove the effectiveness of the two methods, aircraft and cloud images adopt common methods to set attributes, while mountain images adopt Builder method to set attributes. ContinuousScrollableImageView object attributes can be set up with 4, including: rolling direction, the rolling cycle, zoom type, the source image.

(1) Instantiate the object of aircraft image and set its properties

/ / instantiate objects ContinuousScrollableImageView plane = new ContinuousScrollableImageView (this); LayoutConfig planeConfig=new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,0,LayoutConfig.UNSPECIFIED_ALIGNMENT,1); plane.setLayoutConfig(planeConfig); plane.setDirection(ContinuousScrollableImageView.RIGHT); // Set the scrolling direction to the right plane.setDuration(2500); / / set rolling cycle parts relate. SetScaleType (ContinuousScrollableImageView. CENTER_INSIDE); // Set the zoom type plane.setResourceId(resourcetable.media_plane); // Set the image sourceCopy the code

(2) Instantiate the object of cloud image and set its properties

/ / instantiate objects ContinuousScrollableImageView cloud = new ContinuousScrollableImageView (this); LayoutConfig cloudConfig=new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,0,LayoutConfig.UNSPECIFIED_ALIGNMENT,1); cloud.setLayoutConfig(cloudConfig); cloud.setDirection(ContinuousScrollableImageView.LEFT); Cloud. setDuration(4000); cloud.setDuration(4000); // Set the rolling period cloud.setResourceId(resourcetable. Media_cloud); // Set the image sourceCopy the code

(3) Instantiate the object of mountain image and set its properties

LayoutConfig mountainConfig=new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,0,LayoutConfig.UNSPECIFIED_ALIGNMENT,1); / / using Builder object creation and attribute set ContinuousScrollableImageView mountain = new ContinuousScrollableImageView. Builder (enclosing getAbility ()). The setDirection (ContinuousScrollableImageView. LEFT) / / set the direction to the LEFT .setDuration(6000) // Set the interval. SetResourceId (resourcetable.media_mountain) // Set the image source.build (); mountain.setLayoutConfig(mountainConfig);Copy the code

3. Add objects to the overall display layout

layout.addComponent(cloud); // Add the airplane object to the layout Layout.addComponent (mountain); // Add cloud object to layout Layout.addComponent (mountain); // Add the mountain object to the layoutCopy the code

The Library parsing

Library provide developers with the boot interface and properties of a class object ContinuousScrollableImageView Settings interface. Taking the effect shown in Figure 1 as an example, by calling the launch interface, you can start rolling the plane, cloud, and mountain objects; You can change the scrolling effect of the above objects by calling the property Settings interface. The Sample part shows that ContinuousScrollableImageView there are two ways to get the attributes of the object class set, this section will reveal that different attribute set mode attribute set of the realization of the function of the interface is different.

1, ContinuousScrollableImageView start class object interface

The interface has many functions, but the main logic is relatively clear. It can be divided into four parts: setting layout, creating numerical animation, setting monitoring for different scrolling directions and starting animation.

(1) Set the layout

Figure 2 shows the two layouts in sequence

As shown in figure 2, the picture in all class object ContinuousScrollableImageView need with a loop rolling, the effect of aircraft, for example: the plane scroll to the far right, gradually revealed part of the need in the left side. To do this, two layouts are designed: firstImage and secondImage, which are identical and displayed in a loop, with one layout showing the missing parts of the other.

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);
}
Copy the code

(2) Create numerical animation

Planes, clouds, and mountains are static, and to achieve scrolling, you need to use animation classes. Here is the use of numerical animation, to start each object. At the same time, you also need to set the number of cycles, linear changes, cycles and other properties of the animation.

animator.setLoopedCount(AnimatorValue.INFINITE); / / animation infinite repeat. Animator setCurveType (animator. CurveType. LINEAR); // Animator.setDuration (duration); // Duration of the animationCopy the code

(3) Set monitoring for different rolling directions

Planes, clouds and mountains can be set in different rolling directions, and different values of animation monitoring can be set for different directions. Take aircraft as an example: When the plane is rolling horizontally, the purpose of circular display of the two is achieved by setting the change of firstImage and secondImage abscissa. When the plane is rolling vertically, the coordinate changes of firstImage and secondImage are set to achieve the purpose of circular display of the two.

switch (DEFAULT_ASYMPTOTE) { case HORIZONTAL: / / horizontal scroll animator. SetValueUpdateListener (new AnimatorValue. ValueUpdateListener () {/ / value animation listening @ Override public void OnUpdate (AnimatorValue AnimatorValue, float v) {firstImage and secondImage 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); / / set the abscissa firstImage secondImage. SetTranslationX (translationX - width); // set secondImage}}); break; .Copy the code

(4) Start animation

When the animation starts, the coordinates of the plane, cloud and mountain change, and their animations change from static to scrolling.

animator.start(); // Animation startsCopy the code

2. Interface function of setting properties in common mode

Aircraft and cloud use common way to set the properties, including: rolling period, rolling direction, image source, image zoom type. The function realization of each interface is relatively simple. It is worth noting that the start interface is called respectively in the function realization of rolling direction and rolling period, which is to adapt to the Builder mode that will be pointed out below. The specific reasons will be described below. If the developer only sets the properties in the usual way, the launch interface can be separated from the scroll direction and scroll period function implementation and called separately from the airplane or cloud object.

Public void setDuration(int duration) {this.duration = duration; isBuilt = false; build(); } public void setDirection(@directions int direction) {this.direction = direction; isBuilt = false; setDirectionFlags(direction); build(); } public void setResourceId(int resourceId) {this.resourceId = resourceId; firstImage.setImageAndDecodeBounds(this.resourceId); secondImage.setImageAndDecodeBounds(this.resourceId); } / / set the zoom type 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); }Copy the code

3. Set properties in Builder mode

For the mountain, the Builder method is used to set the attribute, and the attribute setting interface in the common way is called respectively in the function realization of each attribute, but the call of the starting interface is missing.

In order to start animation normally in Builder mode, the rolling direction and rolling period function in common mode includes the start interface, so that when the above interface is used in Builder mode, the animation can be started.

public static final class Builder { private ContinuousScrollableImageView scrollableImage; public Builder(Ability ability) { scrollableImage = new ContinuousScrollableImageView(ability); } / / set rolling cycle public Builder setDuration (int duration) {scrollableImage. SetDuration (duration); return this; } / / set the image source public Builder setResourceId (int resourceId) {scrollableImage. SetResourceId (resourceId); return this; } / / set rolling direction public Builder setDirection (@ Directions int direction) {scrollableImage. SetDirection (direction); return this; } / / set the zoom type public Builder setScaleType (@ ScaleType int ScaleType) {scrollableImage. SetScaleType (ScaleType); return this; } public ContinuousScrollableImageView build() { return scrollableImage; }}Copy the code

Project contributor

Liu Lai, Zheng Senwen, Zhu Wei, Chen Mei, Wang Jia Si, Zhang Xinxin

Author: Zhu Wei ISRC

For more information, visit Harmonyos.51cto.com, a collaboration between 51CTO and Huawei