首页 > 其他 > 详细

高质量的客户端引导动画效果-IT蓝豹

时间:2015-10-14 02:16:49      阅读:252      评论:0      收藏:0      [点我收藏+]

高质量的客户端引导动画效果,高仿500px客户端欢迎页面。
主要实现,通过ViewPager加载每一个fragment.创建一个引导页adapter即GuideAdapter,
设置viewpager缓存页数,默认的缓存一页,因为引导页共有4页,所以设置缓存3页,
这样所以page在滑动过程中不会重新创建,每一个fragment切换的时候通过HKTransformer动画实现效果。
部分源码内容如下:
? /**
???? * by Hanks
???? */
??? class HKTransformer implements ViewPager.PageTransformer {
??????? @Override
??????? public void transformPage(View view, float position) {
??????????? if (fragment00.getView() == view) {
??????????????? Log.i("", "view:??? " + view + "position= " + position);
??????????????? currentPosition = position;
??????????? }

??????????? blurringView.invalidate();

??????????? if (position < -1) { // [-Infinity,-1)
??????????????? // This page is way off-screen to the left.
??????????? } else if (position <= 0) { // [-1,0]
??????????????? // Use the default slide transition when moving to the left page
??????????? } else if (position <= 1) { // (0,1]
??????????????? // Fade the page out.

??????????????? float p = Math.abs(position);
??????????????? float f = (1 - p);

??????????????? Log.i("", "p= " + p);
??????????????? // p : 1~0
??????????????? // f : 0~1

??????????????? iv_final_photo.setPivotY(0f);
??????????????? iv_final_photo.setPivotX(iv_final_photo.getWidth() / 2);

??????????????? if (-1 < currentPosition && currentPosition <= 0) {
??????????????????? // A ~ B 界面的动画

??????????????????? iv_initial_phone.setTranslationY(-600 * f);
??????????????????? iv_initial_phone.setScaleX(0.5f * p + 0.5f);
??????????????????? iv_initial_phone.setScaleY(0.5f * p + 0.5f);
??????????????????? iv_device.setScaleX(1 + 2 * f);

??????????????????? if (p > 0.5 && p <= 1) {
??????????????????????? iv_device.setAlpha(2 * p - 1);
??????????????????? } else {
??????????????????????? iv_device.setAlpha(0f);
??????????????????? }

??????????????????? ll_comments.setTranslationY(800 * p);
??????????????????? ll_comments.setAlpha(f);
??????????????????? ll_comments.setScaleX(2 - f);
??????????????????? ll_comments.setScaleY(2 - f);

??????????????????? ll_rows.setTranslationY(-1000 - 500 * p);
??????????????????? ll_rows.setAlpha(0.5f);
??????????????????? iv_final_photo.setTranslationY(-1000 - 500 * p);
??????????????????? iv_final_photo.setAlpha(0.5f);

??????????????????? tv_avatar_you.setTranslationY(-300);

??????????????????? tv_register.setTranslationY(300);

??????????????? } else if (-2 < currentPosition && currentPosition <= -1) {
??????????????????? // B ~ C 界面的动画

??????????????????? iv_initial_phone.setTranslationY(-600 + -300 * f);

??????????????????? ll_comments.setAlpha(p);

??????????????????? ll_rows.setTranslationY(-1000 * p);
??????????????????? ll_rows.setAlpha(0.5f + 0.5f * f);

??????????????????? iv_final_photo.setTranslationY(-1000 * p);
??????????????????? iv_final_photo.setAlpha(0.5f + 0.5f * f);

??????????????????? tv_avatar_you.setTranslationY(-300);
??????????????????? tv_register.setTranslationY(300);
??????????????? } else if (-3 < currentPosition && currentPosition <= -2) {
??????????????????? // C ~ D 界面的动画


??????????????????? iv_final_photo.setScaleX(1 + 3 * f); //1~3
??????????????????? iv_final_photo.setScaleY(1 + 3 * f); //1~3

??????????????????? for (int i = 0; i < ll_rows.getChildCount(); i++) {
??????????????????????? View child = ll_rows.getChildAt(i);
??????????????????????? child.setAlpha(p);
??????????????????????? if (i % 2 == 0) {
??????????????????????????? child.setTranslationX(100 * f);
??????????????????????? } else {
??????????????????????????? child.setTranslationX(-100 * f);
??????????????????????? }
??????????????????? }

??????????????????? tv_avatar_you.setTranslationY(-300 + 300 * f);

??????????????????? tv_register.setTranslationY(300 - 300 * f);
??????????????? }


??????????? } else { // (1,+Infinity]
??????????????? // This page is way off-screen to the right.
??????????? }
??????? }
??? }

运行效果:

?

bubuko.com,布布扣

高质量的客户端引导动画效果-IT蓝豹

原文:http://wuchengyi-1994.iteye.com/blog/2248658

(0)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!