I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details
Finished effect:
preface
Have you distributed the Mid-Autumn Festival benefits? This year our company sent a box of moon cakes and a box of snacks. Last year we sent a box of moon cakes and a box of cereals. Although out of work is almost in the body after the Mid-Autumn Festival, and family reunion, but still want to wish everyone a happy Mid-Autumn Festival. As an Android developer programmer really do not have any good ideas, running as far as possible to look real animation effect and in line with the Mid-Autumn Festival theme, here into the moon, starry sky, popular, clouds, reunion, chang ‘e, moon cakes and other elements, and with Baidu encyclopedia to learn from the Mid-Autumn festival small knowledge oh ~
The Mid-Autumn Festival
The main effect of
The goddess of the Moon
The twinkling stars
3. Fluttering clouds
Main Application technology
1. Combination animation
2. Customize the View
Property animation ObjectAnimator introduction
• translationX and translationY: Used for translation along the X or Y axis.
• Rotation, rotationX, rotationY: Used to rotate around the fulcrum of the View.
• scaleX, scaleY: transverse stretching and longitudinal stretching
• Alpha: transparency, default is 1 (opaque), 0 for full transparency.
• X and y: Describes the final position of the View object in its container.
Introduction to composite animation AnimatorSet
• After (Animator anim) : Executes after inserting an existing animation into the incoming animation.
• After (long delay) : Executes the existing animation after a specified millisecond delay.
• Before (Animator anim) : Inserts an existing animation before the incoming animation.
• With (Animator anim) : Executes an existing animation and an incoming animation simultaneously.
Chang ‘e flying to the moon
Chang ‘e moon is actually very simple is a picture with a combination of animation, the picture for translation, scaling, and gradient
Animator1 = translationX (binding. IvChange, "translationX", 1000f, 0f).setDuration(1000 * 10); ObjectAnimator animator2 = ObjectAnimator.ofFloat(binding.ivChange, "translationY", 1500f, 0f).setDuration(1000 * 10); ObjectAnimator animator3 = ObjectAnimator.offloat (binding.ivchange, "alpha", 1f, 0f).setDuration(1000 * 1); // Scale ObjectAnimator animator4 = ObjectAnimator.offloat (binding.ivChange, "scaleX", 1.5f, 0.5f).setDuration(1000 * 10); ObjectAnimator animator5 = ObjectAnimator.offloat (binding. IvChange, "scaleY", 1.5f, 0.5f).setDuration(1000 * 10); // AnimatorSet set = new AnimatorSet(); set.play(animator1).with(animator2).with(animator4).with(animator5).before(animator3); // Start animation set.start();Copy the codeStarry sky and the realization of popularity
Initialize the background and starry brush
private void init() { starBitmap = zoomImg(BitmapFactory.decodeResource(getResources(), R.drawable.snow), 20, 20); WeatherPaint = new Paint(); weatherPaint.setAntiAlias(true); weatherPaint.setStyle(Paint.Style.FILL); starPaint = new Paint(); starPaint.setMaskFilter(new BlurMaskFilter(1, BlurMaskFilter.Blur.NORMAL)); starPaint.setColor(Color.WHITE); starPaint.setStyle(Paint.Style.FILL); initAlphaFilter(); } public Bitmap zoomImg(Bitmap bm, int newWidth, int newHeight) {int width = bm.getwidth (); int height = bm.getHeight(); Float scaleWidth = ((float) newWidth)/width; float scaleHeight = ((float) newHeight) / height; Matrix matrix = new matrix (); matrix.postScale(scaleWidth, scaleHeight); Newbm = bitmap.createbitmap (bm, 0, 0, width, height, matrix, true); return newbm; } private void initAlphaFilter() { for (int i = 0; i < 100; i++) { alphaFilters[i] = new ColorMatrixColorFilter(new float[]{ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0.01 f * I, 0}); }}Copy the codeInitialize popular star parameters:
private void initStarMeteorParams() {
meteorParams.clear();
starParams.clear();
if (width == 0 || height == 0) {
return;
}
float widthRatio = Unit.px2dip(context, width) / 392.0f;
for (int i = 0; i < 50; i++) {
int index = (int) (Math.random() * 2);
StarParam starParam = new StarParam(index);
starParam.init(width, height, widthRatio);
starParams.add(starParam);
}
for (int i = 0; i < 2; i++) {
MeteorParam param = new MeteorParam();
param.init(width, height, widthRatio);
meteorParams.add(param);
}
}
Copy the codeDraw backgrounds, stars and pop
Private void drawWeatherBg(Canvas Canvas) {int[] color = new int[]{Color.parseColor(context.getResources().getStringArray(R.array.weather_cloudy_light)[0]), Color.parseColor(context.getResources().getStringArray(R.array.weather_cloudy_light)[1])}; mBackgroundShader = new LinearGradient(0, 0, 0, height, color[0], color[1], Shader.TileMode.MIRROR); weatherPaint.setShader(mBackgroundShader); weatherPaint.setShadowLayer(15, 10, 10, Color.GRAY); backgroundRect = new Rect(0, 0, width, height); canvas.drawRect(backgroundRect, weatherPaint); } @Override public boolean onTouchEvent(MotionEvent event) { return super.onTouchEvent(event); } /** * private void drawStarMeteor(Canvas Canvas) {if (starparams.size () > 0) {for (StarParam param: starParams) { drawStar(param, canvas); } } if (meteorParams.size() > 0) { for (MeteorParam param : meteorParams) { drawMeteor(param, canvas); Private void drawStar(StarParam star, canvas, canvas, canvas, canvas, canvas, canvas) Canvas canvas) { if (star == null) { return; } canvas.save(); int index = (int) (star.alpha * 100); if (index < 0) { index = 0; } if (index > 99) { index = 99; } starIdentity = alphaFilters[index]; starPaint.setColorFilter(starIdentity); canvas.scale((float) star.scale, (float) star.scale); canvas.drawBitmap(starBitmap, (float) star.x, (float) star.y, starPaint); canvas.restore(); star.move(); Private void drawMeteor(MeteorParam meteor, Canvas Canvas) {if (meteor == null) {return; } canvas.save(); if (mStarShader == null) { mStarShader = new LinearGradient(0, 0, 0, width, Color.parseColor("#FFFFFFFF"), Color.parseColor("#00FFFFFF"), Shader.TileMode.MIRROR); } starPaint.setShader(mStarShader); starPaint.setColorFilter(null); starPaint.setAntiAlias(true); canvas.rotate((float) (Math.PI * meteor.radians)); Float scale = unit.px2dip (context, width) / 392.0f; float scale = unit.px2dip (context, width) / 392.0f; canvas.scale(scale, scale); Canvas. Translate ((float) meteor. TranslateX, (float) (math.tan (math.pi * 0.1) * unit.dip2px (context, meteorWidth) + meteor.translateY)); if (starRectF == null) { starRectF = new RectF(0, 0, Unit.dip2px(context, meteorWidth), Unit.dip2px(context, meteorHeight)); } float starRadius = Unit.dip2px(context, radius); canvas.drawRoundRect(starRectF, starRadius, starRadius, starPaint); meteor.move(context); canvas.restore(); }Copy the codeStarry sky and pop drawing reference: includes rain, snow, lightning, fog and other weather effects.
Dp, PX interconversion tool
Public class Unit {/** * int px2dip(Context); float pxValue) { final float scale = context.getResources().getDisplayMetrics().density; Return (int) (pxValue/scale + 0.5f); } public static int dip2px(Context Context, dip2px); float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; Return (int) (dpValue * scale + 0.5f); }}Copy the codeThe realization of circulating floating clouds
private Runnable task = new Runnable() { public void run() { handler.postDelayed(this, 30 * 1000); // Set the loop time, // Move objectAnimator.offloat (binding.ivcloud, "translationX", -1000f, 1200f).setDuration(1000 * 30).start(); }};Copy the codeCall:
/ / to keep the screen normally on getWindow (). AddFlags (WindowManager. LayoutParams. FLAG_KEEP_SCREEN_ON); // Call handler.post(task) immediately;Copy the codeText alignment using: AlignTextView
Complete code please see: popular effects and Chang ‘e moon animation.
Android installation package experience: Go to download