This interaction blew up. (c): Splash screen page is disappearing like a cloud

"Interactive fried" may be a series of high-end special effects tutorials, the text will introduce some of the more cool special effects, as well as the idea of implementation. The effect itself may not be much more difficult to implement. The difficulty lies in the idea of realization. Once the idea is opened, the effects will be very simple to implement.

Effect Project Address: Https://github.com/githubwing/WowSplash

This is the third phase, the second phase of the relatively hasty, it does not seem to meet the "interactive bombing" the subject, so I will guarantee the quality, not to follow up the number dine. This time to share the effect is a splash screen page effect, the effect is as follows:

Is there a light in front of you? Now many cool splash screen pages or guide pages like to use video to do, but I am biased, for two reasons:

1.视频会增加App体积，为了这一个闪屏页，多增加用户下载流量，这是很恶心的一件事情。2.第二段云扩散融合效果，视频实现起来比较棘手。

The idea of making a dynamic effect divergent

In the previous article, I shared with you a little trick about animation. Animation such things as magic, as long as the user to see the happy, how to realize it doesn't matter, so do some camouflage to please the user is no problem. Here are some of the following:

1.View magnification is not really magnified.

After 2.View panning, it may have been replaced by an identical twin view, suspended at the top.

3. A special effect like the above, diffusion is not the view itself is spread.

So when doing the action, it should be from a magician's perspective to consider, and not from the user's point of view, to achieve the divergence of thinking. Here can go to see some magic secret Tutorial ~ do look very cool, the principle is very simple, basically the idea of dynamic effect has.

Wowsplash Realization Idea

Let's start by dividing the effects into two segments, one for the stroke animation. Another section is the cloud diffusion animation. First, study the first paragraph.

First Stage

The first paragraph is actually very simple, most of the small partners can see at a glance, this is the SVG with path implementation of the animation. Well, to ~ you are right, there are a lot of online on the realization of this animation, here directly to the needs of things to everyone ~

First of all, you need an SVG picture, how to get it, the United States trade union with me? Think more, completely do not need the art greatly help ~ we can do it ourselves.

First you need to use an artifact: Vector Magic He can help us convert normal images to SVG images. Here I find a simple stroke of the tower-after conversion, you can get the SVG file ~

Second, a tool class is needed to convert the SVG to path. Here I take a gastudio. A tool class: Svgpathparser Next, we'll save the SVG in the String.xml file.

Next use Pathmeasure to do the SVG conversion path of the drawing, specific details, please see source ~ Here not too much elaboration.

float stop = mLength * mAnimatorValue; mTowerPathMeasure.getSegment(0true); canvas.drawPath(mTowerDst, mPaint);

After the tower is finished, a bit monotonous ~ Let's draw some clouds for him ~ Each cloud is a path, so the cloud is just drawing some path.

  privatevoiddrawCould(Canvas canvas) {    for (int0; i < mCouldPaths.length; i++) {      setupCouldPath(mCouldPaths[i], i);      canvas.drawPath(mCouldPaths[i], mPaint);    }  }

Finally, add animation ~ let him not blunt. At the end of the day, a method is executed when the activity is entered, and the first stage is completed.

 public void startAnimate() { restore(); //start tower animate getTowerValueAnimator().start(); //start could animate for (int i = 0; i < mCouldPaths.length; i++) { final ValueAnimator couldAnimator = getCouldValueAnimator(i); postDelayed(new Runnable() { @Override public void run() { couldAnimator.start(); } }, mDuration / 2); } getTitleAnimate().start(); }

Phase II

The second stage looks more dazzling, in fact, it is relatively simple, diffusion is not easy to engage in, you can change a thought. So here I think of using Xfermode, yes, you see the divergent cloud, is actually another picture:

Haha, this picture is posted out, you do not want to laugh. The original looks very dazzling effect, real so funny.

Well, it's good to continue with the idea. I just need to make two pictures use Xfermode to make a base, and in the process let this view gradually transparent, mask the image gradually enlarged.

Of course, with the idea of becoming very simple, in fact, there are some pits, said to meet the pit.

About Xfermode little friends used to know, he has pits, very big pits. Often found that the demo diagram does not come out the same effect. So I specifically summed up a blog as follows: Porterduffxfermode The real reason for the incorrect, interested can look under. Here again to repeat how to avoid the Xfermode pit.

Finally, if you want the Porterduffxfermode to be implemented as expected by the demo (or), the following conditions must be met:

1. Turn off hardware acceleration. (actually turn on hard off-screen caching)

2, the size of two bitmap as much as possible.

3, the background color is transparent color.

4, if the two bitmap position is not exactly the same, may also be expected effect, but you see the effect and your own brain complement the expected effect is inconsistent.

So, in order to avoid these pits, I divided the view into two, the first stage is a view, the second stage is a view. When the first view is finished, convert the view screenshot to bitmap and give it a second view. While the first view is set gone to avoid over-drawing, the second view is actually two bitmap, and the hard off-screen cache is turned on to achieve the correct effect xfermode.

//解决硬件加速的bugnull);

//将第一个View的bitmap交给第二个ViewmWowView.startAnimate(wowSplashView.getDrawingCache());

Finally, using animations to enlarge the second view from 0 to several times, and change the transparency to achieve the desired effect.

OK, this issue of "interactive bombing" to this end, finally attached to the project address, if you feel good, welcome star, Attention I can get the latest news Oh.

Https://github.com/githubwing/WowSplash

This interaction blew up. (c): Splash screen page is disappearing like a cloud