如何在Android中使用带有Java的ConstraintSet动画? [英] How to use ConstraintSet for animation in Android with Java?
问题描述
我发现有一种快速方法可以使用 ConstraintSet
为 ConstrainLayout
活动创建动画。比使用 TransitionManager
更快 RelativeLayout
I find that there is a quick way to create animation with ConstraintSet
for ConstrainLayout
Activity. Faster than use TransitionManager
for RelativeLayout
ConstraintSet
为Activity使用两个xml文件。一个用于第一个位置,另一个用于目的地。
ConstraintSet
use two xml file for an Activity. One for the first position and next one for the destination.
我想创建这样的东西:
https://media.giphy.com/media/2UwXdWEoLWe9iQMFIY/giphy.gif
但是没有明确的指示说明如何在Java中使用它。任何人都这样做可以向我显示源代码或链接到这样的帖子。
But there is no clearly instruction show how to use it in Java. Anyone had done this can show me the source code or link to some post like that.
感谢阅读帖子。
推荐答案
这可以通过 ConstraintSet
来实现。它们的关键是两个有两个布局,一个布局有屏幕的ui元素,另一个布局有元素。现在,您可以使用带有插补器的TransitionManager和您选择的持续时间,并为布局更改设置动画。
This is possible with ConstraintSet
. They key is two have two layouts one layout has ui elements of the screen and the other has elements on the screen. Now you can use TransitionManager with interpolator and duration of your choice and animate the layout changes.
activity_main.xml
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="@+id/constraint"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#181818"
tools:context=".MainActivity">
<ImageView
android:id="@+id/backgroundImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="@drawable/mugello"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="JUNE 3, 2018"
app:layout_constraintRight_toRightOf="@+id/title"
app:layout_constraintBottom_toBottomOf="@+id/title"
android:textSize="12sp"
android:background="#d3d3d3"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:paddingTop="3dp"
android:paddingBottom="3dp"/>
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:background="#F44336"
android:paddingBottom="8dp"
android:paddingEnd="24dp"
android:paddingStart="24dp"
android:paddingTop="8dp"
android:text="Mugello Circuit"
android:textColor="#FFFF"
android:textSize="45sp"
app:layout_constraintRight_toLeftOf="@+id/backgroundImage"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/fadeBackgroudView"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:foreground="@drawable/gradient_variant"
app:layout_constraintBottom_toTopOf="@+id/description" />
<TextView
android:id="@+id/tap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Tap for info"
android:textSize="15sp"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence. It is connected to the separate Santerno river valley by the Futa Pass."
android:textSize="22sp"
android:textColor="#FFFF"
android:background="#181818"
android:gravity="center"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toBottomOf="@+id/backgroundImage"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
activity_main_detail.xml
activity_main_detail.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/backgroundImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="@drawable/mugello"
app:layout_constraintBottom_toTopOf="@+id/description"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:background="#F44336"
android:paddingBottom="8dp"
android:paddingEnd="24dp"
android:paddingStart="24dp"
android:paddingTop="8dp"
android:text="Mugello Circuit"
android:textColor="#FFFF"
android:textSize="45sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="JUNE 3, 2018"
app:layout_constraintRight_toRightOf="@+id/title"
app:layout_constraintTop_toBottomOf="@+id/title"
android:textSize="12sp"
android:background="#d3d3d3"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:paddingTop="3dp"
android:paddingBottom="3dp"/>
<View
android:id="@+id/fadeBackgroudView"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:foreground="@drawable/gradient"
app:layout_constraintBottom_toTopOf="@+id/description" />
<TextView
android:id="@+id/tap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Tap for info"
android:textSize="15sp"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence. It is connected to the separate Santerno river valley by the Futa Pass."
android:textSize="22sp"
android:textColor="#FFFF"
android:gravity="center"
android:background="#181818"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
MainActivity.java
MainActivity.java
public class MainActivity extends AppCompatActivity {
private boolean show = false;
private ImageView backgroundImage;
private ConstraintLayout constraint;
private ConstraintSet constraintSet = new ConstraintSet();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
constraint = findViewById(R.id.constraint);
backgroundImage = findViewById(R.id.backgroundImage);
backgroundImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(show)
hideComponents(); // if the animation is shown, we hide back the views
else
showComponents() ;// if the animation is NOT shown, we animate the views
}
});
}
private void showComponents(){
show = true;
constraintSet.clone(this, R.layout.activity_main_detail);
Transition transition = new ChangeBounds();
transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
transition.setDuration(1000);
TransitionManager.beginDelayedTransition(constraint, transition);
constraintSet.applyTo(constraint);
}
private void hideComponents(){
show = false;
constraintSet.clone(this, R.layout.activity_main);
Transition transition = new ChangeBounds();
transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
transition.setDuration(1000);
TransitionManager.beginDelayedTransition(constraint, transition);
constraintSet.applyTo(constraint);
}
}
这是ConstraintLayout上的幻灯片分享 https://speakerdeck.com/camaelon/advanced-animations-and-constraintlayout
Here's a slide share on ConstraintLayout https://speakerdeck.com/camaelon/advanced-animations-and-constraintlayout
这篇关于如何在Android中使用带有Java的ConstraintSet动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!