Android self-defined component family "8"--Mask text animation

We cover text animation Flash CEMAC Common, because Android app developers do you want to do this animation in the app go? In this article, we look at how to define their own imageview to achieve a text image to achieve the text mask flicker effect, the following first to see the effect of it.

(Recording screen delay causes the effect to not look very good.)

First, the realization principle

The implementation principle is to rewrite the view's OnCreate method. After acquiring the picture resource, the transparency of each pixel is changed to implement, and then a thread is started to cycle through the transparency of pixels in an area.

RGBA Basics: (The following paragraphs refer to text references from Wikipedia)

RGBA is a color space that represents red (red) green (green) blue (blue) and Alpha. Although it is sometimes described as a color space, it does not actually add additional information to the RGB model.

The color used is RGB, which can belong to no matter what kind of RGB color space. But

Title=edwin_catmull&action=edit&redlink=1 "class=" new "title=" Edwin Catmull (page does not exist) "style=" Background-image:none; " >catmull and Smith presented this indispensable alpha value in 1971-1972 years, making

Title=alpha%e6%b8%b2%e6%9f%93&action=edit&redlink=1 "class=" new "title=" Alpha rendering (Page not present) "style=" Background-image:none; " >alpha Rendering and

Title=alpha%e5%90%88%e6%88%90&action=edit&redlink=1 "class=" new "title=" Alpha composition (page not present) "style=" Background-image:none; " >alpha synthesis becomes possible.

The author uses Alpha to name it from the classical linear interpolation equation Αa + (1-α) b is the Greek alphabet.

The alpha channel is typically used as an opacity parameter. Assuming that the alpha channel value of a pixel is 0%, it is completely transparent (that is, invisible) and a value of 100% means a completely opaque pixel (traditional digital image). The value between 0% and 100% allows the pixel to be displayed through the background, just like through glass (translucent), so the effect is simple two-yuan transparency (transparent or opaque). It makes digital synthesis easy. The alpha channel value can be expressed as a percentage, an integer, or as a real number from 0 to 1, as in RGB parameters.

Sometimes it is also written as ARGB (like Rgba, but the first data is Alpha) and is the term used by Macromedia Products. For example, 0X80FFFF00 is 50% transparent yellow, since all the parameters are represented in the range 0 to 255. 0x80 is 128, about half of 255.

PNG is an image format that uses RGBA.

Second, the concrete realization

Package Com.example.helloworld;import Android.content.context;import Android.content.res.typedarray;import Android.graphics.bitmap;import Android.graphics.bitmapfactory;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.matrix;import Android.graphics.paint;import Android.os.Handler; Import Android.os.message;import android.os.systemclock;import android.util.attributeset;import Android.view.View; Import android.widget.imageview;/** * @author Sun Cockroach * */public class Splashimageview extends imageview{private Bitmap      Alterbitmap;      Private Canvas canvas;  private paint paint; Private Handler handler;private static int start_position = 20;private final int speed;private int nowposition = Start_pos    ition;private static int show_width = 20;private Boolean IsFirst = true;private Boolean isstop = false; Private class MyHandler extends Handler {private static final long scale = 10000;private static final int msg_paint = 1;PR Ivate Final SplashimageviewOwner;private final int speed;private long angle;private long lasttime;public MyHandler (Splashimageview owner) { This.owner = Owner;this.lasttime = Systemclock.elapsedrealtime (); this.speed = Owner.speed;sendemptymessage (MSG_PAINT );} @Overridepublic void Handlemessage (Message msg) {if (Msg.what = = Msg_paint) {Long now = Systemclock.elapsedrealtime (); Lon G delta_time = Now-lasttime; System.out.println ("delta_time =" + Delta_time); System.out.println ("alterbitmap.width =" + alterbitmap.getwidth ()); if (nowposition + speed >= alterbitmap.getwidth ( )-Start_position-show_width) {if (isstop) {handler.removecallbacksandmessages (null); handler = Null;isstop = false; return;} Else{nowposition = Start_position;}} Nowposition = nowposition + speed;if (Delta_time > 0) {if (!notifidraw (nowposition)) {return;}} This.sendemptymessagedelayed (Msg_paint, 10);}} Private Boolean Notifidraw (long position) {System.out.println ("nofitydrawtoatal =" + position); if (Position < Alterbitmap.getwidth ()-Start_positIon-show_width) {this.invalidate (); return true;} if (handler! = null) {handler.removecallbacksandmessages (null); handler = null;} return false;} @Overridepublic void setvisibility (int visibility) {super.setvisibility (visibility); if (visibility = = view.visible) {        if (handler = = null) {handler = new MyHandler (this);        }else{handler.removecallbacksandmessages (NULL);        Handler.sendemptymessage (Myhandler.msg_paint); }}else{if (Handler! = null) {handler.removecallbacksandmessages (null); handler = null;}}} public void Stopsplashanimation () {if (handler! = null) {Isstop = true;}} Public Splashimageview (context context, AttributeSet Attrs) {Super (context, attrs); TypedArray a = Context.obtainstyledattributes (attrs, R.styleable.fuseimageview, 0, 0); int resId = A.getresourceid ( R.STYLEABLE.FUSEIMAGEVIEW_IMAGESRC, 0); int speed = A.getint (R.styleable.fuseimageview_speed, 5); this.speed = Speed <= 0? 1:speed; Bitmap up = Bitmapfactory.decoderesource (Context.getresources (), resId);                     Alterbitmap = Bitmap.createbitmap (Up.getwidth (), Up.getheight (), Up.getconfig ());           Canvas = new canvas (ALTERBITMAP);          Paint = new paint ();          Paint.setstrokewidth (5);          Paint.setcolor (Color.Black);                    Canvas.drawbitmap (UP, New Matrix (), paint);                 Setimagebitmap (ALTERBITMAP);        if (getvisibility () = = view.visible) {if (handler = = null) {handler = new MyHandler (this); }}} @Overrideprotected void OnDraw (canvas canvas) {Super.ondraw (canvas), if (isFirst) {IsFirst = false; for (int i=nowp Osition; I<alterbitmap.getwidth ();  i++) {for (int j=0; J<alterbitmap.getheight (); j + +) {int color = Alterbitmap.getpixel (i,                   j);                   int r = color.red (Color);                   int g = Color.green (Color);                 int b = Color.Blue (Color);                 int a = Color.alpha (Color); if (a > a) {color =Color.argb (n, R, G, b);                 }else{color = Color.argb (A, R, G, b);             } alterbitmap.setpixel (I, J, color); }}} for (int i=nowposition, i<nowposition + show_width; i++) {for (int j=0; j <alterbitmap.getheight ();                   J + +) {int color = Alterbitmap.getpixel (i, j);                   int r = color.red (Color);                   int g = Color.green (Color);                 int b = Color.Blue (Color);                 int a = Color.alpha (Color);                 if (a = =) {color = Color.argb (255, R, G, b);                 }else{color = Color.argb (A, R, G, b);             } alterbitmap.setpixel (I, J, color); }} if (Nowposition > Start_position) {for (int i= nowposition-show_width; i<nowpos ition; i++) {for (int j=0; J<alterbitmap.getheight (); j + +) {                  int color = Alterbitmap.getpixel (i, j);                   int r = color.red (Color);                   int g = Color.green (Color);                 int b = Color.Blue (Color);                 int a = Color.alpha (Color);                 if (a >) {color = Color.argb (n, R, G, b);                 }else{color = Color.argb (A, R, G, b);             } alterbitmap.setpixel (I, J, color); }}} setimagebitmap (Alterbitmap);}}

III. realization of specific explanations

1. Initialize operations in the construction method

public Splashimageview (context context, AttributeSet Attrs) {Super (context, attrs); TypedArray a = context.obtainstyledattributes (attrs,r.styleable.fuseimageview, 0, 0); int resId = A.getresourceid ( R.STYLEABLE.FUSEIMAGEVIEW_IMAGESRC, 0); int speed = A.getint (R.styleable.fuseimageview_speed, 5); this.speed = Speed <= 0? 1:speed; Bitmap up = Bitmapfactory.decoderesource (Context.getresources (), resId); alterbitmap = Bitmap.createbitmap ( Up.getwidth (), Up.getheight (), Up.getconfig ()), canvas = new Canvas (alterbitmap);p aint = new paint (); Paint.setstrokewidth (5);p Aint.setcolor (Color.Black), Canvas.drawbitmap (UP, New Matrix (), paint), Setimagebitmap ( ALTERBITMAP); if (getvisibility () = = view.visible) {if (handler = = null) {handler = new MyHandler (this);}}} 

The above Typedarray is a property of its own definition, create a new attrs.xml under the Res/values folder to add its own defined properties

<?xml version= "1.0" encoding= "Utf-8"?><resources> <declare-styleable    name= "Fuseimageview" >        <attr name= "imagesrc" format= "reference"/> <attr        name= "Speed" format= "integer"/>    </ Declare-styleable></resources>

Here are the two properties that you define, one is the image resource ID and one is the Mask movement speed (in fact, it can inherit from view to implement its own definition.) I have a special need here to inherit from ImageView)

Then get the picture resources through Bitmapfactory. and create a writable bitmap resource to the canvas using the CreateBitmap method. Draws a writable bitmap to the same resource's background.

The bottom of the interpretation view is visible, is used to interpret whether the view is viewable, assuming that the thread is opened to animate. Otherwise, turning on thread drawing wastes resources (because it is invisible at all).

2. How to change the transparency and draw (OnDraw method)

for (int i = Nowposition; I < nowposition + show_width; i++) {for (int j = 0; J < Alterbitmap.getheight (); j + +) {int color = Alterbitmap.getpixel (i, j); int r = color.red (color  int g = Color.green (color), int b = color.blue (color), int a = Color.alpha (color), if (a = =) {color = Color.argb (255, R, G, b);} else {color = Color.argb (A, R, G, b);} Alterbitmap.setpixel (i, J, color);}} if (Nowposition > Start_position) {for (int i = nowposition-show_width; i < nowposition; i++) {for (int j = 0; J & Lt Alterbitmap.getheight (); J + +) {int color = Alterbitmap.getpixel (i, j); int r = color.red (color); int g = color.green (color); int b = Color.Blue (color) int a = Color.alpha (color), if (a >) {color = Color.argb (n, R, G, b),} else {color = Color.argb (A, R, G, b);} Alterbitmap.setpixel (i, J, color);}}} 

is mainly the above two loops to achieve the drawing, the above loop is to draw a piece of area to the text of the transparency to the minimum (255), this part of the text is displayed as highlighted, the rest of the text transparency Nice value 80, will show the background color, the text will drop the darkness.

3. How to recycle the mask

Private class MyHandler extends Handler {private static final long scale = 10000;private static final int msg_paint = 1;PR Ivate final splashimageview owner;private final int speed;private long angle;private long lasttime;public MyHandler (Splas Himageview owner) {this.owner = Owner;this.lasttime = Systemclock.elapsedrealtime (); this.speed = Owner.speed; Sendemptymessage (msg_paint);} @Overridepublic void Handlemessage (Message msg) {if (Msg.what = = Msg_paint) {Long now = Systemclock.elapsedrealtime (); Lon G delta_time = Now-lasttime; System.out.println ("delta_time =" + Delta_time); System.out.println ("alterbitmap.width =" + alterbitmap.getwidth ()); if (nowposition + speed >= alterbitmap.getwidth ( )-Start_position-show_width) {if (isstop) {handler.removecallbacksandmessages (null); handler = Null;isstop = false; return;} else {nowposition = start_position;}} Nowposition = nowposition + speed;if (Delta_time > 0) {if (!notifidraw (nowposition)) {return;}} This.sendemptymessagedelayed (Msg_paint,10);}}} 

The circular move matte is written in one thread. Move the speed (configured velocity) distance every 10 milliseconds. To achieve the effect of the mask movement, and then take the width of the image to infer if it has reached the far right.

Summary: In fact the above implementation principle is not difficult. The point is to know the knowledge of RGBA and how to change the transparency of the pixels. This, however, is a temporary way of thinking, assuming that there is something better to achieve. I hope we can communicate.

In addition, "Sun Qiang" also has a blog "is a man on the next 100-storey" the third layer "-high-imitation traffic bank mobile phone Client interface" to participate in the CSDN held the Bowen contest. Let's say you think these posts are helpful to you. I hope you will vote for your valuable vote. Voting address:http://vote.blog.csdn.net/Article/Details?articleid=30101091

Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.

Android self-defined component family "8"--Mask text animation