微信圖片點(diǎn)擊縮放放大超自然效果功能實(shí)現(xiàn)

大家可以先看看官網(wǎng)介紹
https://developer.android.com/training/transitions/start-activity#java

有一些概念性的講述可以看以下文章
Android Transition Animation 過(guò)渡動(dòng)畫(huà)解析

  • 首先可以通過(guò)Android Transition Animation 過(guò)渡動(dòng)畫(huà)框架中的共享元素來(lái)實(shí)現(xiàn)圖片點(diǎn)擊放大的超自然效果;

通過(guò)兩個(gè)Activity來(lái)實(shí)現(xiàn)這個(gè)功能;

一. 添加Material主題

  • 添加Material主題,此時(shí)對(duì)于build.gradle中的minSdkVersion 版本是由要求的,必須高于21
// 添加Material主題,此時(shí)對(duì)于build.gradle中的minSdkVersion 版本是由要求的,必須高于21
<style name="MaterialAppTheme" parent="android:Theme.Material.NoActionBar">
        <!-- enable window content transitions -->
        <item name="android:windowActivityTransitions">true</item>
</style>

二. 為Activity指定Theme

  • 在Manifest文件中必須為兩個(gè)Activity指定以上的Theme;
<activity android:name=".pci.metrol.activity.SharedElementActivity"
            android:theme="@style/MaterialAppTheme"
            />
<activity android:name=".pci.metrol.activity.TransitionActivity"
            android:theme="@style/MaterialAppTheme"
            />

三. 啟動(dòng) Activity 時(shí)的處理

  • TransitionActivity的代碼如下
ImageView mIv_transition;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_transition);

    mIv_transition = (ImageView) findViewById(R.id.iv_transition);
    mIv_transition.setImageBitmap(BitmapFactory.decodeFile("需要顯示的圖片地址"));

    mIv_transition.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                Intent i = new Intent(TransitionActivity.this, SharedElementActivity.class);

                View sharedView = blueIconImageView;
                String transitionName = getString(R.string.TransitionName);

                ActivityOptions activityOptions = ActivityOptions.makeSceneTransitionAnimation(TransitionActivity.this, sharedView, transitionName);
                ActivityCompat.startActivity(TransitionActivity.this, i, activityOptions.toBundle());
            }
        }
    });
}
  • activity_transition布局文件如下,需要注意一個(gè)屬性android:transitionName,在布局文件中使用android:transitionName屬性或者在代碼中使用View.setTransitionName(String)方法來(lái)為兩個(gè)頁(yè)面的共享元素指定同樣 的transitionName;
<ImageView
        android:id='@+id/iv_transition'
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:scaleType="centerCrop"
        android:transitionName="@string/TransitionName"
        />
  • SharedElementActivity代碼如下
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.iv_pic);

    ImageView iv_pic = (ImageView) findViewById(R.id.iv_pic);
    iv_pic.setImageBitmap(BitmapFactory.decodeFile("需要顯示的圖片地址"));
}
  • activity_shared_element布局文件如下:布局文件中使用android:transitionName屬性和之前Activity布局中的要一樣;
<ImageView
        android:id='@+id/iv_pic'
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:scaleType="centerCrop"
        android:transitionName="@string/TransitionName"
        />
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容