AI Development Combat 6-Customization of image components (images)

5 Customization of image components (images)

The image components provided by APP Inventor2 only support the animated form of left and right sliding, as shown below:

The code is now modified so that it also supports an animated form that slides up and down.

The source of the image component is Image.java, which has the following code:

/**

*animation Property Setter method.

*

* @seeAnimationUtil

*

* @paramanimation Animation Kind

*/

@SimpleProperty (description= "a limited form of animation that can attach" +

"A small number of motion types to images. The allowable motions is "+

"Scrollrightslow, Scrollright, Scrollrightfast, Scrollleftslow,scrollleft," +

"Scrollleftfast, and Stop",

Category = Propertycategory.appearance)

TODO (user): This should is changed from a property to an "animate" method, and has the choices

Placed in a dropdown. Aternatively thewhole thing should be removed and we should do

Something that's more consistent with sprites.

Publicvoid Animation (String Animation) {

Animationutil.applyanimation (view,animation);

}

You can see actually calling the Animationutil.applyanimation function to implement the animation, where only the code that lets the picture slide left and right:

/**

*animates a component (using pre-defined animation kinds).

*

* @paramview component to animate

* @paramanimation Animation Kind

*/

publicstatic void Applyanimation (view view, String animation) {

TODO (User): These string constants need to be extracted and defined somewhereelse!

TODO (user): Also, the endless else-if is inefficient

if (Animation.equals ("Scrollrightslow")) {

Applyhorizontalscrollanimation (view, False, 8000);

}else if (animation.equals ("Scrollright")) {

Applyhorizontalscrollanimation (view, False, 4000);

}else if (animation.equals ("Scrollrightfast")) {

Applyhorizontalscrollanimation (view, False, 1000);

}else if (animation.equals ("Scrollleftslow")) {

Applyhorizontalscrollanimation (view, True, 8000);

}else if (animation.equals ("ScrollLeft")) {

Applyhorizontalscrollanimation (view, True, 4000);

}else if (animation.equals ("Scrollleftfast")) {

Applyhorizontalscrollanimation (view, True, 1000);

}else if (animation.equals ("Stop")) {

View.clearanimation ();

}

}

/*

*animates a component moving it horizontally.

*/

privatestatic void Applyhorizontalscrollanimation (View view, Boolean left, int speed) {

Floatsign = left? 1f: -1f;

Animationsetanimationset = new Animationset (true);

Animationset.setrepeatcount (Animation.infinite);

Animationset.setrepeatmode (Animation.restart);

Translateanimationmove = new Translateanimation (animation.relative_to_parent, sign * 0.70f,

Animation.relative_to_parent, sign * -0.70f, animation.relative_to_parent,0,

Animation.relative_to_parent, 0);

Move.setstartoffset (0);

Move.setduration (speed);

Move.setfillafter (TRUE);

Animationset.addanimation (move);

View.startanimation (Animationset);

}

Refer to the source code to add the image to slide up and down, first modify the animated form of Image.java in the description of the text, instead, as follows:

Description = "Set the picture to slide left or right, and stop sliding, set the value to:" +

"Scrollrightslow, Scrollright, Scrollrightfast, Scrollleftslow, scrollleft," +

"Scrollleftfast, Scrolldownslow, Scrolldown, Scrolldownfast, Scrollupslow, Scrollup, Scrollupfast, and stop",

Then add the code that lets the picture slide up and down in Animationutil.java:

/**

*animates a component (using pre-defined animation kinds).

*

* @paramview component to animate

* @paramanimation Animation Kind

*/

public static void Applyanimation (view view, stringanimation) {

TODO (User): These string constants need to be extracted and defined somewhereelse!

TODO (user): Also, the endless else-if is inefficient

if (Animation.equals ("Scrollrightslow")) {

Applyhorizontalscrollanimation (view, False, 8000);

}else if (animation.equals ("Scrollright")) {

Applyhorizontalscrollanimation (view, False, 4000);

}else if (animation.equals ("Scrollrightfast")) {

Applyhorizontalscrollanimation (view, False, 1000);

}else if (animation.equals ("Scrollleftslow")) {

Applyhorizontalscrollanimation (view, True, 8000);

}else if (animation.equals ("ScrollLeft")) {

Applyhorizontalscrollanimation (view, True, 4000);

} else if (Animation.equals ("Scrollleftfast")) {

Applyhorizontalscrollanimation (view, True, 1000);

}else if (animation.equals ("Scrolldownslow")) {

Applyverticalscrollanimation (view, False, 8000);

}else if (animation.equals ("Scrolldown")) {

Applyverticalscrollanimation (view, False, 4000);

} elseif (Animation.equals ("Scrolldownfast")) {

Applyverticalscrollanimation (view, False, 1000);

}else if (animation.equals ("Scrollupslow")) {

Applyverticalscrollanimation (view, True, 8000);

}else if (animation.equals ("Scrollup")) {

Applyverticalscrollanimation (view, True, 4000);

}else if (animation.equals ("Scrollupfast")) {

Applyverticalscrollanimation (view, True, 1000);

}else if (animation.equals ("Stop")) {

View.clearanimation ();

}

}

/*

*animates a component moving it horizontally.

*/

privatestatic void Applyverticalscrollanimation (View view, boolean up, int speed) {

Animationsetanimationset = new Animationset (true);

Animationset.setrepeatcount (Animation.infinite);

Animationset.setrepeatmode (Animation.restart);

Translateanimationmove;

if (UP) {

move = new Translateanimation (animation.relative_to_self, 0.0f,

Animation.relative_to_self, 0.0f,animation.relative_to_self,

1.0f, animation.relative_to_self,0.0f);

}else{

move = new Translateanimation (animation.relative_to_self, 0.0f,

Animation.relative_to_self, 0.0f,animation.relative_to_self,

0.0f, animation.relative_to_self,1.0f);

}

Examples of Use: