登录创建动画，如Facebook的Android [英] Creating login animation like facebook android
本文介绍了登录创建动画，如Facebook的Android的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个登录页面（如Facebook Android应用程序），其中的用户名和密码的EditText 字段被隐藏。一个logo显示其上面的高达动画有一定的距离，并停留在新的位置，然后在编辑字段显示在页面上。
下面是我曾尝试。但这里的标志开始从页面的底部，并行进到页面的顶部。凡为我想要的标志，从页面的中间开始和转移一点至新的位置。
如何可以做到这一点任何想法>？
main.xml中
＆LT; ImageView的
机器人：ID =@ + ID / imageView1
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_alignParentTop =真
机器人：layout_centerHorizontal =真
机器人：layout_marginTop =116dp
机器人：SRC =@可绘制/ ic_launcher/＆GT;
RES /动画/ animationfile.xml
＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;设置的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：插=@机器人：动画/ linear_interpolator＆GT;
＆LT;翻译
机器人：时间=5000
机器人：fromYDelta =50％P
机器人：toYDelta = - 50％P
/＆GT;
＆LT; /集＆gt;
Main.java
动画translatebu = AnimationUtils.loadAnimation（这一点，R.anim.animationfile）;
// tv.setText（一些文本视图。）;
img.startAnimation（translatebu）;
解决方案
1日Facebook的图像上升，所以你必须把它从当前位置转换到顶部
＆LT;翻译
机器人：fromYDelta =0％P
机器人：toYDelta = - 30％P
机器人：时间=1000/＆GT;
下面安卓fromYDelta 的起始位置和安卓toYDelta 是个即<$ C $结束位置C> 30％和安卓病程是时间，即1秒
2日现在附加一个监听器来检查时，动画完成 3现在淡入您的登录框
这里是code
MinActivity.java
进口android.app.Activity;
进口android.os.Bundle;
进口android.view.View;
进口android.view.View.OnClickListener;
进口android.view.animation.Animation;
进口android.view.animation.Animation.AnimationListener;
进口android.view.animation.AnimationUtils;
进口android.widget.Button;
进口android.widget.ImageView;
进口android.widget.LinearLayout;
公共类MainActivity延伸活动{
@覆盖
保护无效的onCreate（包savedInstanceState）{
super.onCreate（savedInstanceState）;
的setContentView（R.layout.activity_main）;
按钮startAnimation =（按钮）findViewById（R.id.button1）;
最后的LinearLayout LoginBox =（的LinearLayout）findViewById（R.id.LoginBox）;
LoginBox.setVisibility（View.GONE）;
startAnimation.setOnClickListener（新OnClickListener（）{
@覆盖
公共无效的onClick（查看为arg0）{
动画animTranslate = AnimationUtils.loadAnimation（MainActivity.this，R.anim.translate）;
animTranslate.setAnimationListener（新AnimationListener（）{
@覆盖
公共无效onAnimationStart（动画为arg0）{}
@覆盖
公共无效onAnimationRepeat（动画为arg0）{}
@覆盖
公共无效onAnimationEnd（动画为arg0）{
LoginBox.setVisibility（View.VISIBLE）;
动画animFade = AnimationUtils.loadAnimation（MainActivity.this，R.anim.fade）;
LoginBox.startAnimation（animFade）;
}
}）;
ImageView的imgLogo =（ImageView的）findViewById（R.id.imageView1）;
imgLogo.startAnimation（animTranslate）;
}
}）;
}
}
而在动画文件夹中使用这些XML的
fade.xml
＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;设置的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：fillAfter =真
机器人：插=@机器人：动画/ accelerate_decelerate_interpolator＆GT;
＆LT;阿尔法
机器人：时间=200
机器人：fromAlpha =0.0
机器人：插=@机器人：动画/ accelerate_interpolator
机器人：toAlpha =1.0/＆GT;
＆LT; /集＆gt;
translate.xml
＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;集
的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：插=@机器人：动画/ accelerate_decelerate_interpolator
机器人：fillAfter =真正的＆GT;
＆LT;翻译
机器人：fromYDelta =0％P
机器人：toYDelta = - 30％P
机器人：时间=1000/＆GT;
＆LT; /集＆gt;
和布局 activity_main.xml
＆LT; RelativeLayout的的xmlns：机器人=http://schemas.android.com/apk/res/android
的xmlns：工具=http://schemas.android.com/tools
机器人：layout_width =match_parent
机器人：layout_height =match_parent
机器人：paddingBottom会=@扪/ activity_vertical_margin
机器人：以下属性来=@扪/ activity_horizontal_margin
机器人：paddingRight =@扪/ activity_horizontal_margin
机器人：paddingTop =@扪/ activity_vertical_margin
工具：上下文=MainActivity。＆GT;
＆LT;按钮
机器人：ID =@ + ID /按钮1
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_alignParentLeft =真
机器人：layout_alignParentTop =真
机器人：文本=开始动画/＆GT;
＆LT; ImageView的
机器人：ID =@ + ID / imageView1
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_centerHorizontal =真
机器人：layout_centerVertical =真
机器人：SRC =@可绘制/ ic_launcher/＆GT;
＆LT;的LinearLayout
机器人：ID =@ + ID / LoginBox
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT
机器人：layout_centerHorizontal =真
机器人：layout_centerVertical =真
机器人：方向=垂直＆GT;
＆LT;的EditText
机器人：ID =@ + ID / editText1
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT
机器人：提示=邮件ID/＆GT;
＆LT;的EditText
机器人：ID =@ + ID / editText2
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT
机器人：提示=密码
机器人：inputType =textPassword/＆GT;
＆LT;按钮
机器人：ID =@ + ID /按钮2
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT
机器人：文本=登陆/＆GT;
＆LT; / LinearLayout中＆GT;
＆LT; / RelativeLayout的＆GT;
I want to create a login page (Like facebook android app) where the userid and password EditText fields are hidden. A logo is shown on the page which animates above upto a certain distance and stays at the new position and then the edit fields are shown.
Here is something I have tried. But here the logo starts from bottom of the page and travels to the top of the page. Where as I want the logo to start from middle of the page and shift a little up to its new position.
Any idea on how this can be done>?
main.xml
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="116dp"
android:src="@drawable/ic_launcher" />
res/anim/animationfile.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator" >
<translate
android:duration="5000"
android:fromYDelta="50%p"
android:toYDelta="-50%p"
/>
</set>
Main.java
Animation translatebu= AnimationUtils.loadAnimation(this, R.anim.animationfile);
// tv.setText("Some text view.");
img.startAnimation(translatebu);
解决方案
1st The facebook image goes up so you have to translate it from current position to top
<translate
android:fromYDelta="0%p"
android:toYDelta="-30%p"
android:duration="1000" />
Here android:fromYDelta is start position and android:toYDelta is end position in percentage i.e -30% and android:duration is in time i.e. 1 second
2nd Now attach a listener to check when animation is done 3rd Now Fade in your login box
here is the code
MinActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button startAnimation =(Button) findViewById(R.id.button1);
final LinearLayout LoginBox = (LinearLayout) findViewById(R.id.LoginBox);
LoginBox.setVisibility(View.GONE);
startAnimation.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
Animation animTranslate = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
animTranslate.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation arg0) { }
@Override
public void onAnimationRepeat(Animation arg0) { }
@Override
public void onAnimationEnd(Animation arg0) {
LoginBox.setVisibility(View.VISIBLE);
Animation animFade = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade);
LoginBox.startAnimation(animFade);
}
});
ImageView imgLogo = (ImageView) findViewById(R.id.imageView1);
imgLogo.startAnimation(animTranslate);
}
});
}
}
And in the anim folder use these xml's
fade.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/accelerate_decelerate_interpolator" >
<alpha
android:duration="200"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="0%p"
android:toYDelta="-30%p"
android:duration="1000" />
</set>
And the layout activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Start Animation" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_launcher" />
<LinearLayout
android:id="@+id/LoginBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email ID" />
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
</RelativeLayout>
这篇关于登录创建动画，如Facebook的Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
