-
2021-06-04 03:07:19
大多数Android系统默认Activity间的动画切换效果为,右边滑入,左边滑出;
1.代码中切换- 使用overridePendingTransition
适用情况 : 个别activity的切换动画
调用时机 : overridePendingTransition ,一般在代码中的startActivity() 或 finish()后调用
参数解读 :
overridePendingTransition(R.anim.slide_in_for_left, R.anim.slide_out_to_right);
第一个参数是,代表 即将进来的activity的动画
第二个参数是,当前activity出去的动画
4)注意问题:
(1) overridePendingTransition需要在主线程中有效,子线程无效,如果必须实在子线程用可以Handler、message的方式,如:
Handler mHandler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what==1){
Intent intent=new Intent(WelcomeActivity.this,MainActivity.class);
startActivity(intent);
finish();
overridePendingTransition(R.anim.fade, R.anim.hold);
}
}
};
(2) TabHost中的Activity调用overridePendingTransition()方法无效
2.利用设置theme主题设置切换动画
适用情况 : 需定义多数Activity的进出动画
使用方法 : (以实现淡入淡出的动画为例)
(1)首先在res文件夹下建立anim文件夹,然后在里面建立fade_in.xml和fade_out.xml两个动画资源
fade_in.xml
android:duration="300"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
fade_out.xml
android:duration="300"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
(2)在values文件夹下的styles.xml 增加主题
@style/fade
@anim/fade_in
@anim/fade_out
@anim/fade_in
@anim/fade_out
(3)在AndroidManifest.xml中的Activity的声明上加入android:theme="@style/Anim_fade"
package="com.example.customanimationforactivity"
android:versionCode="1"
android:versionName="1.0" >
android:minSdkVersion="10"
android:targetSdkVersion="10" />
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar" >
android:name="com.example.customanimationforactivity.MainActivity"
android:label="@string/app_name"
android:theme="@style/Anim_fade" >
参数解读 :
android:activityOpenEnterAnimation
一个activity创建进入的效果
android:activityOpenExitAnimation
一个activity还没有finish()下退出效果,
比如有俩个activity A与B 首先启动A 然后再启动B 那么A还没有finish() 这时A的退出效果。
android:activityCloseEnterAnimation
表示上一个activity返回进入效果
比如有俩个activity A与B ,B在最上面,B退出(finish)后 A重新进入的效果。
android:activityCloseExitAnimation
表示的是activity finish()之后的效果
比如有俩个activity A与B B退出后会被finish() 那么B的退出效果在这定义。
更多相关内容 -
Android:多个Fragment切换问题/切换动画设置
2022-03-22 00:18:23Android开发关于Fragment的切换问题问题描述
在项目开发中,遇到这样一个问题场景:在某个页面(Fragament)中,点击按钮,进行页面部分的切换,即在一个Fragament中嵌套使用了两个Fragament进行切换。
设置按钮监听
首先在布局文件中,给两个进行切换的按钮标记id:button_user、button_shop;
并添加需要动态填充的布局(id为id_role)<Button android:id="@+id/button_user" android:layout_width="100dp" android:layout_height="30dp" android:background="@drawable/button_circle2" android:text="我是用户" android:textColor="@color/bar" android:textSize="12sp" android:paddingTop="-10dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:layout_marginLeft="70dp"/> <Button android:id="@+id/button_shop" android:layout_width="100dp" android:layout_height="30dp" android:background="@drawable/button_circle" android:text="我是商家" android:textColor="@color/white" android:textSize="12sp" android:paddingTop="-10dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:layout_marginLeft="20dp"/> <LinearLayout android:id="@+id/id_role" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> </LinearLayout>
在主控的Fragment文件中调用接口 View.OnClickListener
public class page fragment extends Fragment implements View.OnClickListener{ ... }
在onActivityCreated中绑定按钮并设置按钮监听:
@Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); Button button_user = (Button) getActivity().findViewById(R.id.button_user); Button button_shop = (Button) getActivity().findViewById(R.id.button_shop); button_user.setOnClickListener(this); button_shop.setOnClickListener(this); }
覆写接口的onClick方法
@Override public void onClick(View v) { switch (v.getId()){ case R.id.button_user: Log.d("Number","1"); break; case R.id.button_shop: Log.d("Number","2"); break; default: break; } }
至此,按钮监听设置完成。
Fragment切换
要实现Fragment的切换,使用
FragmentManager
类来管理fragment,对fragment的操作(添加、删除、替换等)称为一个事务,通过FragmentTransaction类来提交执行。(类似数据库中的事务概念)
几个关键方法
add()
:添加
hide()
:隐藏
show()
:显示
replace()
:替换
关于Fragment 生命周期/事物管理的更详细的信息可参考这篇博文Fragment的基本应用简要来说,实现fragment切换主要步骤为:
1.实例化对象fragmentTransaction
2.隐藏当前已显示的fragment
3.对需要动态添加的fragment进行判断,如果没有,使用add添加;如果已有,直接显示。
4.提交事务
相关代码如下:private void hideFragment(FragmentTransaction fragmentTransaction) { if(imshop != null){ fragmentTransaction.hide(imshop); } if(imuser != null){ fragmentTransaction.hide(imuser); } } @Override public void onClick(View v) { FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction(); hideFragment(fragmentTransaction); switch (v.getId()){ case R.id.button_user: if(imuser == null){ imuser imuser = new imuser(); fragmentTransaction.replace(R.id.id_role,imuser); }else { fragmentTransaction.show(imuser); } break; case R.id.button_shop: if(imshop == null){ imshop imshop = new imshop(); fragmentTransaction.replace(R.id.id_role,imshop); }else { fragmentTransaction.show(imshop); } break; default: break; } fragmentTransaction.commit(); }
其中,imuser/imshop 为我需要添加的两个Fragment的类对象。
这里我遇到了一个小问题,使用add进行添加后,并不能完成切换,但替换成replace之后便可实现切换,具体原因待考究。Fragment动画
点击按钮进行界面切换是瞬间完成的,对于用户来说,体验并不良好。因此可以简单添加两个左移、右移的动画来进行过渡,使体验更为丝滑。
首先建立动画文件,在res下创建文件夹anim。
先考虑一个左移动画,主要可拆分成两个步骤:1.当前页面向左划出。2.之后页面向右划入。
因此建立两个文件:
左移划出:slide_out_to_left.xml<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="400" android:fromXDelta="0.0" android:interpolator="@android:anim/accelerate_interpolator" android:toXDelta="-100%" />
右移划入:slide_in_from_right
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="400" android:fromXDelta="100.0%" android:interpolator="@android:anim/accelerate_interpolator" android:toXDelta="0.0" />
这里参数简单说明一下:
duration:表示动画持续时间(毫秒)
fromXDelta:滑动起始点
toXDelta:滑动终点更多属性可参考这篇文章Android动画
上面两个步骤实现了左滑,同样,右滑只需要修改坐标值即可。
左移划入slide_in_from_left.xml
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="400" android:fromXDelta="-100%" android:interpolator="@android:anim/accelerate_interpolator" android:toXDelta="0.0" />
右移划出slide_out_to_right.xml
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="400" android:fromXDelta="0.0" android:interpolator="@android:anim/accelerate_interpolator" android:toXDelta="100%" />
设置完之后,重新修改控制文件,只需添加 fragmentTransaction.setCustomAnimations属性。
@Override public void onClick(View v) { FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction(); hideFragment(fragmentTransaction); switch (v.getId()){ case R.id.button_user: if(imuser == null){ imuser imuser = new imuser(); fragmentTransaction.setCustomAnimations(R.anim.slide_in_from_right, R.anim.slide_out_to_left); fragmentTransaction.replace(R.id.id_role,imuser); }else { fragmentTransaction.show(imuser); } break; case R.id.button_shop: if(imshop == null){ imshop imshop = new imshop(); fragmentTransaction.setCustomAnimations(R.anim.slide_in_from_left, R.anim.slide_out_to_right); fragmentTransaction.replace(R.id.id_role,imshop); }else { fragmentTransaction.show(imshop); } break; default: break; } fragmentTransaction.commit(); }
效果演示:
常规Activity多个Fragment切换
设计导航栏时经常采用在Activity中进行多个Fragment切换,实际上和在Fragment进行设计大同小异。这里放置一个案例可供参考。
main.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bg"> <LinearLayout android:id="@+id/id_content" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> </LinearLayout> <include layout="@layout/bottom" /> </FrameLayout>
bottom.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="66dp" android:gravity="center" android:orientation="horizontal" android:background="@color/white" android:layout_gravity="bottom"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:id="@+id/id_tab1" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/id_tab_img1" android:clickable="false" android:layout_width="28dp" android:layout_height="28dp" android:src="@drawable/home" android:scaleType="fitXY" android:background="#00000000"/> </LinearLayout> <LinearLayout android:id="@+id/id_tab2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/id_tab_img2" android:clickable="false" android:layout_width="28dp" android:layout_height="28dp" android:scaleType="fitXY" android:src="@drawable/product" android:background="#00000000"/> </LinearLayout> <LinearLayout android:id="@+id/id_add" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/id_tab_add" android:clickable="false" android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/add" android:scaleType="fitXY" android:background="#00000000"/> </LinearLayout> <LinearLayout android:id="@+id/id_tab3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/id_tab_img3" android:clickable="false" android:layout_width="28dp" android:layout_height="28dp" android:src="@drawable/community" android:scaleType="fitXY" android:background="#00000000"/> </LinearLayout> <LinearLayout android:id="@+id/id_tab4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/id_tab_img4" android:clickable="false" android:layout_width="28dp" android:layout_height="28dp" android:src="@drawable/me" android:scaleType="fitXY" android:background="#00000000"/> </LinearLayout> </LinearLayout>
MainActivity.java
package cn.edu.cdut.goat; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentActivity; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentTransaction; import androidx.viewpager.widget.PagerAdapter; import androidx.viewpager.widget.ViewPager; import android.annotation.SuppressLint; import android.app.Activity; import android.app.LocalActivityManager; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.widget.ImageButton; import android.widget.LinearLayout; import java.util.ArrayList; import java.util.List; import cn.edu.cdut.goat.R; public class MainActivity extends FragmentActivity implements View.OnClickListener { //声明四个Tab的布局文件 private LinearLayout mTab1; private LinearLayout mTab2; private LinearLayout mTab3; private LinearLayout mTab4; //声明四个Tab的ImageButton private ImageButton mImg1; private ImageButton mImg2; private ImageButton mImg3; private ImageButton mImg4; //声明四个Tab分别对应的Fragment private Fragment mFrag1; private Fragment mFrag2; private Fragment mFrag3; private Fragment mFrag4; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); // 隐藏标题栏 setContentView(R.layout.activity_main); initViews();//初始化控件 initEvents();//初始化事件 selectTab(0);//默认选中第一个Tab } private void initEvents(){ //初始化四个Tab的点击事件 mTab1.setOnClickListener(this); mTab2.setOnClickListener(this); mTab3.setOnClickListener(this); mTab4.setOnClickListener(this); } private void initViews(){ //初始化四个Tab的布局文件 mTab1=(LinearLayout)findViewById(R.id.id_tab1); mTab2=(LinearLayout)findViewById(R.id.id_tab2); mTab3=(LinearLayout)findViewById(R.id.id_tab3); mTab4=(LinearLayout)findViewById(R.id.id_tab4); //初始化四个ImageButton mImg1=(ImageButton)findViewById(R.id.id_tab_img1); mImg2=(ImageButton)findViewById(R.id.id_tab_img2); mImg3=(ImageButton)findViewById(R.id.id_tab_img3); mImg4=(ImageButton)findViewById(R.id.id_tab_img4); } //处理Tab的点击事件 @SuppressLint("NonConstantResourceId") @Override public void onClick(View v){ resetImgs(); //先将四个ImageButton置为灰色 switch(v.getId()){ case R.id.id_tab1: selectTab(0); break; case R.id.id_tab2: selectTab(1); break; case R.id.id_tab3: selectTab(2); break; case R.id.id_tab4: selectTab(3); break; } } //进行选中Tab的处理 private void selectTab(int i){ //获取FragmentManager对象 FragmentManager manager=getSupportFragmentManager(); //获取FragmentTransaction对象 FragmentTransaction transaction=manager.beginTransaction(); //先隐藏所有的Fragment hideFragments(transaction); switch(i){ //当选中点击的是第一页的Tab时 case 0: //设置第一页的ImageButton为绿色 mImg1.setImageResource(R.drawable.home_select); //如果第一页对应的Fragment没有实例化,则进行实例化,并显示出来 if(mFrag1==null){ mFrag1=new pageFragment1(); transaction.add(R.id.id_content,mFrag1); }else{ //如果第一页对应的Fragment已经实例化,则直接显示出来 transaction.show(mFrag1); } break; case 1: mImg2.setImageResource(R.drawable.product_select); if(mFrag2==null){ mFrag2=new pageFragment2(); transaction.add(R.id.id_content,mFrag2); }else{ transaction.show(mFrag2); } break; case 2: mImg3.setImageResource(R.drawable.community_select); if(mFrag3==null){ mFrag3=new pageFragment3(); transaction.add(R.id.id_content,mFrag3); }else{ transaction.show(mFrag3); } break; case 3: mImg4.setImageResource(R.drawable.me_select); if(mFrag4==null){ mFrag4=new pageFragment4(); transaction.add(R.id.id_content,mFrag4); }else{ transaction.show(mFrag4); } break; } //不要忘记提交事务 transaction.commit(); } //将四个的Fragment隐藏 private void hideFragments(FragmentTransaction transaction){ if(mFrag1!=null){ transaction.hide(mFrag1); } if(mFrag2!=null){ transaction.hide(mFrag2); } if(mFrag3!=null){ transaction.hide(mFrag3); } if(mFrag4!=null){ transaction.hide(mFrag4); } } //将四个ImageButton置为灰色 private void resetImgs(){ mImg1.setImageResource(R.drawable.home); mImg2.setImageResource(R.drawable.product); mImg3.setImageResource(R.drawable.community); mImg4.setImageResource(R.drawable.me); } }
-
3DViewPageTransformer:设置ViewPageTransformer,达到viewpage切换动画,包括3D切换动画,使用简单
2021-05-15 10:21:28设置ViewPageTransformer,达到viewpage切换动画,包括3D切换动画,使用简单 话不多说,直接上效果图 具体使用: // "默认", "深入浅出", "立方体", "旋转","左右折叠", "右上角进入" , "右下角进入", "淡入淡出",... -
使用 vue-router 切换页面时怎么设置过渡动画
2021-01-20 14:15:52每次切换时向左向右切换动画如何实现 解决方案 我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. router/index.js import ... -
使用vue-router切换页面时实现设置过渡动画
2020-10-16 02:05:31今天小编就为大家分享一篇使用vue-router切换页面时实现设置过渡动画。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
activity切换动画效果大全
2014-04-09 15:36:40android activity切换动画效果大全,包括六个经典例子: 1、25个activity切换的动画效果; 2、android activity 切换效果库(劲推荐); 3、Android_Activity之间切换动画; 4、Android改变Activity切换效果; 5、... -
js实现图片切换(动画版)
2020-11-28 04:10:15学习了妙味课堂的图片切换(动画版) 这个小效果相对简单一点。 知识预备: 【1】background-position-x background-position属性设置背景原图像(由 background-image 定义)的位置,意味着使用这个属性的前提是... -
android Activity切换动画设置方式总结
2013-06-06 10:08:12android2.0+可以用overridePendingTransition()方法设置activity切换动画 但必须在startActivity()或finish()之后设置,否则无法覆盖系统默认切换动画。 系统默认切换动画可以在sdk以下目录找到: /sdk/...android2.0+可以用overridePendingTransition()方法设置activity切换动画
但必须在startActivity()或finish()之后设置,否则无法覆盖系统默认切换动画。
系统默认切换动画可以在sdk以下目录找到:
/sdk/platforms/android-17/data/res/anim/activity_close_enter.xml 当前activity结束时,将要出现的activity动画
/sdk/platforms/android-17/data/res/anim/activity_close_exit.xml 当前activity结束时的activity动画
/sdk/platforms/android-17/data/res/anim/activity_open_enter.xml 启动activity时,将要出现的activity动画
/sdk/platforms/android-17/data/res/anim/activity_open_exit.xml 启动activity时,将要消失的activity动画
还有另外一种比较简洁的设置应用activity切换动画的方式,使用Theme设置:
<style name="MyTheme" parent="AppTheme"> <item name="android:windowAnimationStyle">@style/ActivityAnimation</item> </style> <!-- Standard animations for a full-screen window or activity. --> <style name="ActivityAnimation"> <item name="android:activityOpenEnterAnimation">@anim/in_from_right</item> <!-- 打开activity,设置activity进入展示动画 --> <item name="android:activityOpenExitAnimation">@anim/out_to_left</item> <!-- 打开activity,设置上个activity离开动画 --> <item name="android:activityCloseEnterAnimation">@anim/in_from_left</item> <!-- 结束activity,设置上个activity进入动画 --> <item name="android:activityCloseExitAnimation">@anim/out_to_right</item> <!-- 结束activity,设置当前activity离开动画 --> </style>
通过以上方式,便可设置完成。<application android:icon="@drawable/aaa" android:label="@string/app_name" android:theme="@style/MyTheme" > <!-- 设置整个应用的activity切换动画 -->
-
Qt StackWidget切换动画
2016-07-15 16:53:44QStackedWidget切换widget时的动画 -
Android开发之ViewPager切换动画
2021-04-05 10:46:03作者yungfan,源码PageTransformerDemo,Android从3.0开始,ViewPager也开始有了切换动画,ViewPager有个setPageTransformer()方法,用于设置ViewPager切换时的动画效果。Google提供了两个切换动画的例子:... -
Android实现千变万化的ViewPager切换动画
2021-01-05 01:58:14之前写过一篇文章:Android自定义ViewPager实现个性化的图片切换效果,有朋友提出,ViewPager自带了一个setPageTransformer用于设置切换动画~ 本篇文章,将进行以下内容学习: 1、介绍如何使用setPageTransformer... -
Compose 页面切换动画
2021-12-14 10:00:02Compose 页面切换动画 前因后果 Compose 正式版已经发布了一个多月了,从 Compose beta 版本发布之后各大网站中热度就一直不减,官方也一直在为开发者们推出学习 Compose 的文章,更加说明了 Android 开发的未来...Compose 页面切换动画
前因后果
Compose
正式版已经发布了一个多月了,从Compose beta
版本发布之后各大网站中热度就一直不减,官方也一直在为开发者们推出学习Compose
的文章,更加说明了Android
开发的未来趋势。在之前我写了
Compose
版本的玩安卓,当然也有 MVVM 版本的,只是不同分支而已,这是 Github地址:https://github.com/zhujiang521/PlayAndroid但之前一直存在着一个问题,就是页面切换的时候没有动画,也不能说没有动画,可以通过
Crossfade
来实现两个页面之间的淡入淡出,但这就够了吗?完全不够啊!咱们的产品和UI第一个不答应,只是淡入淡出是绝对不行的!开始尝试
其实
Compose
中的Navigation
就是之前 Jetpack 中的Navigation
改的,所以之前的 api 还是存在的,然后用上试试呗!
navController.navigate(route) { anim { enter = R.anim.in_from_right exit = R.anim.out_to_left popEnter = R.anim.in_from_right popExit = R.anim.out_to_left } }
然后就有了上面的代码进行尝试,其实写的时候也想过不行,因为在
Compose
中动画有自己的一套实现方式,并不是像之前那样放在 anim 文件夹下的 xml 文件,但还是抱着试一试的态度,最后发现。。。果然不行。。。于是开始一顿乱找,后来发现在官方文档中已经写明了:
注意:
anim
块不能与 Navigation Compose 一起使用。系统会在此功能请求中跟踪 Navigation Compose 中的转换动画。然后就没有然后了,就开始等。。。。这一等就是好久。(其实这篇文章是之前写的,但一直没发)
终于在前段时间,这个问题有了眉目,Google 并没有将这个功能放到
Navigation
库中,而是重新创建了一个库:navigation-animation
,使用的时候同时引入即可进行使用。开始撸码
首先需要做的肯定是添加依赖:
现在应用级的 build.gradle 中添加:
repositories { mavenCentral() }
然后在 Module 级的 build.gradle 中添加:
// Navigation 动画 implementation "com.google.accompanist:accompanist-navigation-animation:$accompanist_version"
接下来需要做的是迁移之前写的
Navigation
的代码,先来看看之前的写法吧:@ExperimentalPagingApi @Composable fun NavGraph( startDestination: String = MainDestinations.HOME_PAGE_ROUTE ) { val navController = rememberNavController() val actions = remember(navController) { MainActions(navController) } NavHost( navController = navController, startDestination = startDestination ) { composable(MainDestinations.HOME_PAGE_ROUTE) { Home(actions) } } }
需要做的迁移有:
- 替换
rememberNavController()
为rememberAnimatedNavController()
- 替换
NavHost
为AnimatedNavHost
- 替换
import androidx.navigation.compose.navigation
为import com.google.accompanist.navigation.animation.navigation
- 替换
import androidx.navigation.compose.composable
为import com.google.accompanist.navigation.animation.composable
那就来吧:
@OptIn(ExperimentalAnimationApi::class, ExperimentalPagerApi::class) @Composable fun NavGraph( startDestination: String = PlayDestinations.HOME_PAGE_ROUTE, ) { val navController = rememberAnimatedNavController() val actions = remember(navController) { PlayActions(navController) } AnimatedNavHost( navController = navController, startDestination = startDestination ) { setComposable(PlayDestinations.HOME_PAGE_ROUTE) { WeatherViewPager( toCityList = actions.toCityList, toWeatherList = actions.toWeatherList ) } } }
下面就来看看如何使用这个库为页面之间切换添加动画吧:
@ExperimentalAnimationApi public fun NavGraphBuilder.navigation( startDestination: String, route: String, enterTransition: (AnimatedContentScope<NavBackStackEntry>.() -> EnterTransition?)? = null, exitTransition: (AnimatedContentScope<NavBackStackEntry>.() -> ExitTransition?)? = null, popEnterTransition: ( AnimatedContentScope<NavBackStackEntry>.() -> EnterTransition? )? = enterTransition, popExitTransition: ( AnimatedContentScope<NavBackStackEntry>.() -> ExitTransition? )? = exitTransition, builder: NavGraphBuilder.() -> Unit )
上面这段代码是
navigation-animation
库中的源码,可以看到除了之前Navigation
库中的一些参数外还多了几个参数用来设置动画,来具体看看吧:- **enterTransition:**在此 NavGraph 中定义目的地的输入转换动画
- **exitTransition:**在此 NavGraph 中为目的地定义退出转换动画
- **popEnterTransition:**在此 NavGraph 中定义目的地的弹出输入转换动画
- **popExitTransition:**在此 NavGraph 中为目的地定义弹出退出转换动画
再来看看具体使用吧:
composable( route = route, arguments = arguments, deepLinks = deepLinks, enterTransition = { expandVertically(animationSpec = tween(300)) }, exitTransition = { shrinkOut(animationSpec = tween(300)) }, popEnterTransition = { expandVertically(animationSpec = tween(300)) }, popExitTransition = { shrinkOut(animationSpec = tween(300)) }, content = content, )
OK,这就可以了。大家可以多种组合动画尝试下,可以实现各种你想要的动画。
仓促的结尾
本篇文章到这里就差不多了,但如果大家没有使用过
Compose
或者对之前使用的Navigation
并不熟悉的话可以先去看看我之前的文章,大家可以购买我的新书《Jetpack Compose:Android全新UI编程》进行阅读,里面有完整的 Compose 框架供大家学习。呸呸呸,太不要脸了,又在推荐自己的新书。。。
如果对你有帮助的话,别忘记点个 Star,感激不尽。
- 替换
-
viewpager切换动画与时长控制
2016-12-01 15:28:14viewpager切换动画与时长控制 -
js+css3文字上下滚动切换动画特效
2020-06-11 10:19:07一款简单的js+css3文字上下滚动切换动画特效,可设置多种不同颜色的文字。 -
vue页面切换项目实现转场动画的方法
2020-12-13 11:51:25移动端, 使用vue为了良好的用户体验, 会需要实现APP形式的切换页面的左滑和右滑效果 实现原理, vue的过渡 & 动画 技术栈: vue + vue-router 解决思路 区分前进 和 后退的路由 网上搜索的资料, 找到了两种 监听... -
jQuery内容层叠滚动切换动画插件
2019-08-23 10:13:21这是一款很有创意的jQuery内容滚动切换特效插件,我们可以设置任意数量的文字层,让其层叠在一起,然后点击按钮让其出现层叠滚动切换的效果,当然,它也支持自动滚动切换,另外,你也可以自己设置滚动切换的速度。 -
vue-router之实现导航切换过渡动画效果
2021-01-19 21:11:03提供了transition的封装组件,添加过渡动画,通过添加或删除css类名来实现。 过渡的css类名: v-enter 进入过渡的开始状态 v-enter-active 进入活动状态 v-enter-to 进入的结束状态 v-leave 离开过渡的开始状态 ... -
Android页面切换动画(包括不同任务栈之间页面切换动画)通过Theme去设置
2017-05-03 10:35:53通过主题去设置同一个栈之间页面切换动画,不了解的可以去参考 鸿洋这篇博客 1 . 在项目res目录下新建anim文件夹,里边放的都是动画,写入4个动画 in_from_right.xml ; in_from_right_close.xml ; out_to_left.xml ,... -
实现视图的切换动画
2021-04-04 02:24:32源码iOSSharedViewTransition,iOSSharedViewTransition可以实现视图的切换动画。通过一个接口就可以完成动画切换的所有设置。 -
vue3的页面切换动画 vue3!vue3!vue3!
2021-06-25 18:09:24重点: vue2的进入/离开 直接-enter就好了,vue3的需要 -enter-from 其他的都一样; ... <router-view class="router-view" v-slot="{ Component }">...transition :name="transitionName" mode="out-in">... -
Flutter 页面切换动画
2019-09-30 15:30:12Flutter 页面切换动画 创建两个模拟页面 class LeftPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blue, appBar: AppBar(title:.... -
flutter_boost 页面切换动画
2021-11-17 10:47:40官方文档没有介绍怎么使用页面切换动画 二、源码 三、实现效果: 'dialogPage': (settings, uniquedId) { return PageRouteBuilder<dynamic>( settings: settings, transitionDuration -
react实现路由切换动画效果
2021-07-16 18:39:36把你需要有动画效果的页面用CSSTransition包裹起来 import { CSSTransition } from 'react-transition-group'; import { RouteComponentProps } from 'react-router-dom'; const Album: FC<RouteComponentProps&... -
Unity Spine切换动画
2022-03-21 18:11:39Unity使用Spine切换动画时会自动加入融合,这时动画会产生过渡的效果,如果想直接切换则按下图操作即可 把Default Mix Duration设置为0 public void Awake() { skeletonAnimation = transform.Find(... -
HTML5网页背景切换动画代码.zip
2019-05-24 04:48:22HTML5网页背景切换动画代码基于jquery-1.11.0.min.js制作,点击下拉框不同选项网页背景切换不同颜色。 -
设置ViewPager的切换动画时间
2016-12-09 22:01:29时,ViewPager的切换使用时间是系统给定的,如果我们需要自己设置切换使用时长,系统在ViewPager类中是没有给出方法直接设置的,所以我们需要自己通过其他方法来进行设置。 1.创建一个类继承Scroller -
VC实现窗口的百叶窗切换动画+代码实例
2021-03-17 11:20:29摘要:VC/C++源码,界面编程,百叶窗切换 VC++实现窗口的百叶窗切换动画源码实例,运行后即可看到窗口内以百叶窗的形式加载照片,为了可以看清楚效果,例子设置了让百叶窗循环演示,竖向的百叶窗和切换,横向的其它也... -
测试Activity切换动画
2014-12-24 16:00:35设置Activity的切换动画,有两种方式: 1.使用overridePendingTransition(新Activity进入动画, 旧Activity退出动画),需要紧接在startActivity 和finish()后。 2.在manifest中配置Activity的theme。 下面着重说明... -
Android动画之Activity切换动画overridePendingTransition实现和Theme Xml方式实现
2019-01-04 12:06:40Android靠Activity组织主要页面,所以Activity的切换不可避免,Android 利用Activity的切换动画使切换更有趣。Activity的切换包括从一个Activity跳转到一个新的Activity或者退出当前Activity回到原来的Activity,...