四川淘宝网站建设方案,成都广告公司制作,友谊路街道网站建设,网站建设初学效果图实现思路#xff1a;1、Activity设置自定义Shared Element切换动画2、透明状态栏#xff08;透明Toolbar,使背景图上移#xff09;3、Toolbar底部增加和背景一样的高斯模糊图#xff0c;并上移图片#xff08;为了使背景图的底部作为Toolbar的背景#xff09;4、上…效果图实现思路1、Activity设置自定义Shared Element切换动画2、透明状态栏透明Toolbar,使背景图上移3、Toolbar底部增加和背景一样的高斯模糊图并上移图片为了使背景图的底部作为Toolbar的背景4、上下滑动通过NestedScrollView拿到移动的高度同时调整Toolbar的背景图透明度1、Activity设置自定义元素共享切换动画大家可以发现页面跳转时图片移动的是一个曲线路径我们可以定制View的过渡切换效果这是Material Design中比较常见的用法Api21以上才有效。需要在开启页面时使用ActivityOptions.makeSceneTransitionAnimation()其中定义共享的view和transitionName。然后在对应的Activity里创建ArcMotion对象。ArcMotion是PathMotion子类是个曲线路径对应代码片// Activity设置自定义 Shared Element切换动画if (Build.VERSION.SDK_INT Build.VERSION_CODES.LOLLIPOP) {//定义ArcMotionArcMotion arcMotion new ArcMotion();arcMotion.setMinimumHorizontalAngle(50f);arcMotion.setMinimumVerticalAngle(50f);//插值器控制速度Interpolator interpolator AnimationUtils.loadInterpolator(this, android.R.interpolator.fast_out_slow_in);//实例化自定义的ChangeBoundsCustomChangeBounds changeBounds new CustomChangeBounds();changeBounds.setPathMotion(arcMotion);changeBounds.setInterpolator(interpolator);changeBounds.addTarget(binding.include.ivOnePhoto);//将切换动画应用到当前的Activity的进入和返回getWindow().setSharedElementEnterTransition(changeBounds);getWindow().setSharedElementReturnTransition(changeBounds);}// 开启
Intent intent new Intent(context, MovieDetailActivity.class);
intent.putExtra(bean, positionData);
ActivityOptionsCompat options ActivityOptionsCompat.makeSceneTransitionAnimation(context,imageView, CommonUtils.getString(R.string.transition_book_img));//与xml文件对应ActivityCompat.startActivity(context, intent, options.toBundle());值得注意的是因为加载图片要一点时间切换页面时就会出现闪烁的情况而如果取的是缓存就不会有这样的问题所以这里有个小技巧就是起初Glide加载的图片就指定固定的大小.override(120,120)这样图片就会被缓存起来等到跳转时就取缓存。具体还请大家看项目源码。2、透明状态栏// 为头部是View的界面设置状态栏透明
StatusBarUtil.setTranslucentImageHeader(this, 0, binding.titleToolBar);其中内容根布局不要设置android:fitsSystemWindowstrue,这样会额外添加一个状态栏。其中StatusBarUtil是一个为Android App 设置状态栏的工具类。3、Toolbar的背景图仔细分析后发现网易云音乐的Toolbar的背景其实显示的是高斯模糊图的底部所以这里基本套路是Toolbar是透明的后面背景图取的是高斯模糊图的底部一部分。调整Toolbar背景图位置// Toolbar的高度
int toolbarHeight binding.titleToolBar.getLayoutParams().height;
// Toolbar状态栏的高度
final int headerBgHeight toolbarHeight StatusBarUtil.getStatusBarHeight(this);// 使背景图向上移动到图片的最底端保留Toolbar状态栏的高度
binding.ivTitleHeadBg.setVisibility(View.VISIBLE);
ViewGroup.LayoutParams params binding.ivTitleHeadBg.getLayoutParams();
ViewGroup.MarginLayoutParams ivTitleHeadBgParams (ViewGroup.MarginLayoutParams) binding.ivTitleHeadBg.getLayoutParams();
int marginTop params.height - headerBgHeight;
ivTitleHeadBgParams.setMargins(0, -marginTop, 0, 0);
binding.ivTitleHeadBg.setImageAlpha(0);显示Toolbar背景图监听图片显示在显示之后将其设置为透明色然后在滑动的时候渐变。这里值得注意的是在设置图片时不要设置加载中的图片不然初始化时达不到透明的效果。// 高斯模糊背景加载后将背景设为透明
Glide.with(this).load(NeteasePlaylistActivity.IMAGE_URL_MEDIUM)//.placeholder(R.drawable.stackblur_default).error(R.drawable.stackblur_default).bitmapTransform(new BlurTransformation(this, 14, 3))// 设置高斯模糊.listener(new RequestListenerString, GlideDrawable() {//监听加载状态Overridepublic boolean onException(Exception e, String model, TargetGlideDrawable target, boolean isFirstResource) {return false;}Overridepublic boolean onResourceReady(GlideDrawable resource, String model, TargetGlideDrawable target, boolean isFromMemoryCache, boolean isFirstResource) {// Toolbar背景设为透明binding.titleToolBar.setBackgroundColor(Color.TRANSPARENT);// 背景图初始化为全透明binding.ivTitleHeadBg.setImageAlpha(0);binding.ivTitleHeadBg.setVisibility(View.VISIBLE);return false;}
}).into(binding.ivTitleHeadBg);其中引入的库应为如下将官方Glide的额外扩展了使其可以支持高斯模糊。 compile jp.wasabeef:glide-transformations:2.0.14、上下滑动渐变背景图透明度由于NestedScrollView滚动监听只能在API23以上才能使用这里为了兼容需要额外处理定义滚动接口具体MyNestedScrollView /*** 根据页面滑动距离改变Header透明度方法*/private void scrollChangeHeader(int scrolledY) {if (scrolledY 0) {scrolledY 0;}float alpha Math.abs(scrolledY) * 1.0f / (slidingDistance);Drawable drawable binding.ivTitleHeadBg.getDrawable();if (drawable ! null) {if (scrolledY slidingDistance) {// title部分的渐变drawable.mutate().setAlpha((int) (alpha * 255));binding.ivTitleHeadBg.setImageDrawable(drawable);} else {drawable.mutate().setAlpha(255);binding.ivTitleHeadBg.setImageDrawable(drawable);}}}这样基本的效果就实现啦其中如有需要还可以做些额外的处理如当背景图不透明时切换标题等~实践了很多实现这个页面的方法目前为止这个方案是最好的效果体验几乎是一样其中涉及到的知识点有1、页面跳转共享元素曲线动画2、透明状态栏3、Glide监听图片加载状态和加载固定大小图片等4、NestedScrollView在Api23下的滑动兼容。源码地址https://github.com/youlookwhat/NeteaseMusicUI
