博客
关于我
Material Design 系列 Transition
阅读量:515 次
发布时间:2019-03-07

本文共 3193 字,大约阅读时间需要 10 分钟。

Android Transition 系列技术全面解析

PathMotion 类

PathMotion 是一个抽象类,专门用于定义路径动画。该类通过 getPath 方法实现路径插值,允许开发者在两个点之间定义路径。默认实现采用直线路径,但可以通过继承该类扩展实现其他路径类型,如圆弧路径。

具体实现

public abstract class PathMotion {    public PathMotion() {}    public PathMotion(Context context, AttributeSet attrs) {}        public abstract Path getPath(float startX, float startY, float endX, float endY);}
  • 默认实现:提供一个直线路径动画,通过 moveTolineTo 方法定义路径。
  • 自定义实现:可以通过继承 PathMotion 并实现 getPath 方法,定义其他路径类型,如圆弧路径。

AutoTransition 类

AutoTransition 是一个工具类,用于自动处理多个场景的过渡。其主要功能包括:

  • 自动处理场景切换:支持 fade 出、 move 、 resize 和 fade 入的顺序执行。
  • 简化代码编写:通过继承 TransitionSet,自动初始化多个过渡动画。
  • 代码实现

    public class AutoTransition extends TransitionSet {    public AutoTransition() {        init();    }    public AutoTransition(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    private void init() {        setOrdering(ORDERING_SEQUENTIAL);        addTransition(new Fade(Fade.OUT));        addTransition(new ChangeBounds());        addTransition(new Fade(Fade.IN));    }}

    Change 系列

    Change 系列是一系列用于场景变化的过渡效果,主要包括:

    • ChangeBounds:捕捉目标视图的布局范围,处理场景大小变化。
    • ChangeClipBounds:处理视图裁剪范围。
    • ChangeImageTransform:处理图像变换。
    • ChangeScroll:处理滚动效果。
    • ChangeTransform:处理视图变换。

    这些类通过 Property 封装键值对,供 createAnimator 方法处理。

    官方示例实践

    BasicTransition 示例

    实现原理

  • 根布局:需要一个 rootView 作为过渡的根容器。
  • 场景切换:通过 TransitionManager.go(Scene) 接受场景变换。
  • 场景获取:通过 getSceneForLayout 方法获取预定义的场景。
  • 核心代码

    public class BasicTransitionFragment extends Fragment {    // ... 其他代码 ...        @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        mSceneRoot = (ViewGroup) view.findViewById(R.id.scene_root);        mScene1 = new Scene(mSceneRoot, (ViewGroup) mSceneRoot.findViewById(R.id.container));        mScene2 = Scene.getSceneForLayout(mSceneRoot, R.layout.scene2, getActivity());        mScene3 = Scene.getSceneForLayout(mSceneRoot, R.layout.scene3, getActivity());        mTransitionManagerForScene3 = TransitionInflater.from(getActivity())                .inflateTransitionManager(R.transition.scene3_transition_manager, mSceneRoot);        return view;    }        // ... 其他代码 ...}

    ActivitySceneTransitionBasic 示例

    实现原理

  • Activity 选项:使用 ActivityOptionsCompat 定义场景过渡动画。
  • Pair 对象:用于定义共享元素及其对应的视图 ID。
  • 核心代码

    @Overridepublic void onItemClick(AdapterView
    adapterView, View view, int position, long id) { Item item = (Item) adapterView.getItemAtPosition(position); Intent intent = new Intent(this, DetailActivity.class); intent.putExtra(DetailActivity.EXTRA_PARAM_ID, item.getId()); ActivityOptionsCompat activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation( this, new Pair
    (view.findViewById(R.id.imageview_item), DetailActivity.VIEW_NAME_HEADER_IMAGE), new Pair
    (view.findViewById(R.id.textview_name), DetailActivity.VIEW_NAME_HEADER_TITLE) ); ActivityCompat.startActivity(this, intent, activityOptions.toBundle());}

    开源库推荐

    • Transition 融合:通过自定义 interpolator 实现更复杂的动画效果。
    • Android Animations:提供丰富的动画资源和示例。

    注意事项

  • 版本兼容性:Transition 系列在低版本 Android 系统中可能存在兼容性问题。
  • 动画优化:在动画结束后,建议调用 finishAfterTransition() 方法,避免使用 finish()
  • 通过以上技术,开发者可以轻松实现复杂的 UI 变换效果,提升应用的用户体验。

    转载地址:http://adwjz.baihongyu.com/

    你可能感兴趣的文章
    npm install报错,证书验证失败unable to get local issuer certificate
    查看>>
    npm install无法生成node_modules的解决方法
    查看>>
    npm install的--save和--save-dev使用说明
    查看>>
    npm node pm2相关问题
    查看>>
    npm run build 失败Compiler server unexpectedly exited with code: null and signal: SIGBUS
    查看>>
    npm run build报Cannot find module错误的解决方法
    查看>>
    npm run build部署到云服务器中的Nginx(图文配置)
    查看>>
    npm run dev 和npm dev、npm run start和npm start、npm run serve和npm serve等的区别
    查看>>
    npm run dev 报错PS ‘vite‘ 不是内部或外部命令,也不是可运行的程序或批处理文件。
    查看>>
    npm scripts 使用指南
    查看>>
    npm should be run outside of the node repl, in your normal shell
    查看>>
    npm start运行了什么
    查看>>
    npm WARN deprecated core-js@2.6.12 core-js@<3.3 is no longer maintained and not recommended for usa
    查看>>
    npm 下载依赖慢的解决方案(亲测有效)
    查看>>
    npm 安装依赖过程中报错:Error: Can‘t find Python executable “python“, you can set the PYTHON env variable
    查看>>
    npm.taobao.org 淘宝 npm 镜像证书过期?这样解决!
    查看>>
    npm—小记
    查看>>
    npm上传自己的项目
    查看>>
    npm介绍以及常用命令
    查看>>
    NPM使用前设置和升级
    查看>>