最近在考虑用新的形式构建APP的欢迎页和引导页,发现一个不错的过渡动画,主要是图片的灰度和放大效果,进入后延迟一秒开始动画。 使用RxJava的Timer操作符实现延迟。
前端的fullpage展示已经在非常多的站点上使用了,这里尝试将Android的引导页换成fullpage的网页动画,这里是示例图片,添加更多动画元素以后效果应该非常不错。
-
首先我替换了原生的webview控件,改成了腾讯x5的webviewSDK,低配的手机上加强了性能体验(虽然感觉冷启动过程好像长了点...)
-
在asserts文件夹中建立一个web项目文件夹,如
web_page,然后用前端开发工具(我是用的sublime text3)实现fullpage引导页。 -
Tencent webview调用本地HTML资源:
mWeb.loadUrl("file:///android_asset/web_page/page.html");
效果:
效果:
在MainActivity中添加了Material design风格的底部导航栏:BottomNavigation 但是在引入过程中发现,单个tab点击的时候都有放大效果,这不符合我的设计风格,作者并没有添加控制点击动画的API,于是自己动手,下载源码开始修改。
- 首先我们在BottomNavigationBar类中发现初始化过程:
public void initialise() { mSelectedPosition = DEFAULT_SELECTED_POSITION; mBottomNavigationTabs.clear(); if (!mBottomNavigationItems.isEmpty()) { mTabContainer.removeAllViews(); if (mMode == MODE_DEFAULT) { if (mBottomNavigationItems.size() <= MIN_SIZE) { mMode = MODE_FIXED; } else { mMode = MODE_SHIFTING; } } if (mBackgroundStyle == BACKGROUND_STYLE_DEFAULT) { if (mMode == MODE_FIXED) { mBackgroundStyle = BACKGROUND_STYLE_STATIC; } else { mBackgroundStyle = BACKGROUND_STYLE_RIPPLE; } } if (mBackgroundStyle == BACKGROUND_STYLE_STATIC) { mBackgroundOverlay.setVisibility(View.GONE); mContainer.setBackgroundColor(mBackgroundColor); } int screenWidth = Utils.getScreenWidth(getContext()); if (mMode == MODE_FIXED) { int[] widths = BottomNavigationHelper.getMeasurementsForFixedMode(getContext(), screenWidth, mBottomNavigationItems.size(), mScrollable); int itemWidth = widths[0]; for (BottomNavigationItem currentItem : mBottomNavigationItems) { FixedBottomNavigationTab bottomNavigationTab = new FixedBottomNavigationTab(getContext()); setUpTab(bottomNavigationTab, currentItem, itemWidth, itemWidth); } } else if (mMode == MODE_SHIFTING) { int[] widths = BottomNavigationHelper.getMeasurementsForShiftingMode(getContext(), screenWidth, mBottomNavigationItems.size(), mScrollable); int itemWidth = widths[0]; int itemActiveWidth = widths[1]; for (BottomNavigationItem currentItem : mBottomNavigationItems) { ShiftingBottomNavigationTab bottomNavigationTab = new ShiftingBottomNavigationTab(getContext()); setUpTab(bottomNavigationTab, currentItem, itemWidth, itemActiveWidth); } } if (mBottomNavigationTabs.size() > mFirstSelectedPosition) { selectTabInternal(mFirstSelectedPosition, true, false, false); } else if (!mBottomNavigationTabs.isEmpty()) { selectTabInternal(0, true, false, false); } } }
mMode代表不同的点击效果,一般底部导航栏不超过3个时,都是MODE_FIXED模式,超过则为MODE_SHIFTING模式。我们希望修改MODE_FIXED模式下的点击动画,于是找到:
if (mMode == MODE_FIXED) { int[] widths = BottomNavigationHelper.getMeasurementsForFixedMode(getContext(), screenWidth, mBottomNavigationItems.size(), mScrollable); int itemWidth = widths[0]; for (BottomNavigationItem currentItem : mBottomNavigationItems) { FixedBottomNavigationTab bottomNavigationTab = new FixedBottomNavigationTab(getContext()); setUpTab(bottomNavigationTab, currentItem, itemWidth, itemWidth); } }
跟进setUpTab这个方法:
/** * Internal method to setup tabs * * @param bottomNavigationTab Tab item * @param currentItem data structure for tab item * @param itemWidth tab item in-active width * @param itemActiveWidth tab item active width */ private void setUpTab(BottomNavigationTab bottomNavigationTab, BottomNavigationItem currentItem, int itemWidth, int itemActiveWidth) { bottomNavigationTab.setInactiveWidth(itemWidth); bottomNavigationTab.setActiveWidth(itemActiveWidth); bottomNavigationTab.setPosition(mBottomNavigationItems.indexOf(currentItem)); bottomNavigationTab.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { BottomNavigationTab bottomNavigationTabView = (BottomNavigationTab) v; selectTabInternal(bottomNavigationTabView.getPosition(), false, true, false); } }); mBottomNavigationTabs.add(bottomNavigationTab); BottomNavigationHelper.bindTabWithData(currentItem, bottomNavigationTab, this); bottomNavigationTab.initialise(mBackgroundStyle == BACKGROUND_STYLE_STATIC); mTabContainer.addView(bottomNavigationTab); }
发现底部图标和文字由bottomNavigationTab控制,跟进bottomNavigationTab发现可以设置item选中和非选中的状态,这正是我想要修改的:
public void select(boolean setActiveColor, int animationDuration) { isActive = true; ValueAnimator animator = ValueAnimator.ofInt(containerView.getPaddingTop(), paddingTopActive); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { containerView.setPadding(containerView.getPaddingLeft(), (Integer) valueAnimator.getAnimatedValue(), containerView.getPaddingRight(), containerView.getPaddingBottom()); } }); animator.setDuration(animationDuration); animator.start(); iconView.setSelected(true); if (setActiveColor) { labelView.setTextColor(mActiveColor); } else { labelView.setTextColor(mBackgroundColor); } if (badgeItem != null) { badgeItem.select(); } }
也就是说我们给这个属性动画加上一个控制就可以了,那应该在BottomNavigationBar设置的时候传入进来,于是我在BottomNavigationBar加入了mIconAnimation变量。
private void setUpTab(BottomNavigationTab bottomNavigationTab, BottomNavigationItem currentItem, int itemWidth, int itemActiveWidth) { bottomNavigationTab.setInactiveWidth(itemWidth); bottomNavigationTab.setActiveWidth(itemActiveWidth); bottomNavigationTab.setPosition(mBottomNavigationItems.indexOf(currentItem)); /** modified here **/ if (mMode != MODE_SHIFTING) bottomNavigationTab.setIconAnimation(mIconAnimation);//1111 bottomNavigationTab.setTextSize(mLabelTextSize);//1111 bottomNavigationTab.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { BottomNavigationTab bottomNavigationTabView = (BottomNavigationTab) v; selectTabInternal(bottomNavigationTabView.getPosition(), false, true, false); } }); mBottomNavigationTabs.add(bottomNavigationTab); BottomNavigationHelper.bindTabWithData(currentItem, bottomNavigationTab, this); bottomNavigationTab.initialise(mBackgroundStyle == BACKGROUND_STYLE_STATIC); mTabContainer.addView(bottomNavigationTab); }
BottomNavigationTab中在动画部分添加一个判断控制即可。
详见 Home3Fragment,react-src
详见: http://www.jianshu.com/p/4f9fbcce3bf8
类似横向的时间轴,主要是计算单个View的padding值作为当前timeline point的x值,再将起点和终点绘制一条线即可。
效果:
