Scroll up a ScrollView slowly - android

The question is "How do i scroll up a ScrollView to top very smoothly and slowly".
In my special case i need to scroll to top in about 1-2 seconds.
Ive tried interpolating manually using a Handler (calling scrollTo(0, y)) but that didnt work at all.
I've seen this effect on some bookreader-apps yet, so there must be a way, im sure :D.
(Text is very slowly scrolling up to go on reading without touching the screen, doing input).

I did it using object animator (Available in API >= 3) and it looks very good:
Define an ObjectAnimator:
final ObjectAnimator animScrollToTop = ObjectAnimator.ofInt(this, "scrollY", 0);
(this refers to the class extending Android's ScrollView)
you can set its duration as you wish:
animScrollToTop.setDuration(2000); (2 seconds)
P.s. Don't forget to start the animation.

In 2 seconds move the scroll view to the possition of 2000
new CountDownTimer(2000, 20) {
public void onTick(long millisUntilFinished) {
scrollView.scrollTo(0, (int) (2000 - millisUntilFinished)); // from zero to 2000
}
public void onFinish() {
}
}.start();

Try the following code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)
{
ValueAnimator realSmoothScrollAnimation =
ValueAnimator.ofInt(parentScrollView.getScrollY(), targetScrollY);
realSmoothScrollAnimation.setDuration(500);
realSmoothScrollAnimation.addUpdateListener(new AnimatorUpdateListener()
{
#Override
public void onAnimationUpdate(ValueAnimator animation)
{
int scrollTo = (Integer) animation.getAnimatedValue();
parentScrollView.scrollTo(0, scrollTo);
}
});
realSmoothScrollAnimation.start();
}
else
{
parentScrollView.smoothScrollTo(0, targetScrollY);
}

Have you tried smoothScrollTo(int x, int y)?
You can't set the speed parameter but maybe this function will be ok for you

You could use the Timer and TimerTask class. You could do something like
scrollTimer = new Timer();
scrollerSchedule = new TimerTask(){
#Override
public void run(){
runOnUiThread(SCROLL TO CODE GOES HERE);
}
};
scrollTimer.schedule(scrollerSchedule, 30, 30);

Related

scrollView.scrollTo() speed control?

I would like to programmatically scroll to a specific point in a
scrollView...which I can do just fine...
Except I land there instantly.
Is there a way to control the speed of the scroll so it looks smoother?
Could somebody point me to an animation with a scrollview?
You can use object animator to scroll:
ObjectAnimator.ofInt(scrollView, "scrollY", scrollTo).setDuration(duration).start();
or you can use ContDownTimer:
new CountDownTimer(2000, 20) {
public void onTick(long millisUntilFinished) {
scrollView.scrollTo((int) (2000 - millisUntilFinished), 0);
}
public void onFinish() {
}
}.start();
There is method for that if you want to scroll it smoothly smoothScrollTo()
use it Like
scrollView.smoothScrollTo(xPos, yPos);

CircularReveal animation doesn't work on first attempt

In android 5.0 i am trying to work with circular reveal animation
Problem
When i click on button to start reveal animation, on first click animation doesn't start
Second Click onwards it works normally
My Code
public class MainActivity extends ActionBarActivity {
Animator a;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final View cardType = findViewById(R.id.cardtype);
cardType.setVisibility(View.GONE);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
a = ViewAnimationUtils.createCircularReveal(cardType,
cardType.getWidth(),
cardType.getHeight(),
0,
cardType.getHeight() * 2)
.setDuration(2500);
a.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
cardType.setVisibility(View.VISIBLE);
}
});
a.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
cardType.setVisibility(View.GONE);
}
});
findViewById(R.id.icon_first_activity).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
a.start();
}
});
}
}}
I haven't tried your code, but I think you have a small ordering problem. I think you just need to set the cardType visible before you start the animation.
Edited to add:
... and you should be setting your button View.INVISIBLE, not View.GONE.
Here: This code works.
Edited once more to add:
Yes. Your problem is that you set the view GONE initially. That means it has 0 size. Then you use cardType.getHeight and cardType.getWidth as reveal coordinates. They are 0. You are going to want to set the view INVISIBLE, initially, and then use width/2 and height/2 as the center of the reveal.
Basically what others answers say, it's correct, but the problem is if you want visibility GONE (because your layout requires it GONE!) you have to set visibility INVISIBLE in the xml with height 0dp (and/or width 0dp as well) and programmatically set the correct LayoutParams even inside the click event it will work. For example my code:
...
expandButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//To not have empty scroll, the container is INVISIBLE with 0dp height.
//Otherwise the Reveal effect will not work at the first click.
//Here I set the parameters programmatically.
viewContainer.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
if (viewContainer.getVisibility() == View.VISIBLE) {
expandButton.animate().rotation(0f).setDuration(duration).start();
Utils.unReveal(viewContainer, 0, 0);
} else {
expandButton.animate().rotation(180f).setDuration(duration).start();
Utils.reveal(viewContainer, viewContainer.getWidth(), 0);
}
}
});
...
#TargetApi(VERSION_CODES.LOLLIPOP)
public static void reveal(final View view, int cx, int cy) {
if (!hasLollipop()) {
view.setVisibility(View.VISIBLE);
return;
}
//Get the final radius for the clipping circle
int finalRadius = Math.max(view.getWidth(), view.getHeight());
//Create the animator for this view (the start radius is zero)
Animator animator =
ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius);
//Make the view VISIBLE and start the animation
view.setVisibility(View.VISIBLE);
animator.start();
}
#TargetApi(VERSION_CODES.LOLLIPOP)
public static void unReveal(final View view, int cx, int cy) {
if (!hasLollipop()) {
view.setVisibility(View.GONE);
return;
}
//Get the initial radius for the clipping circle
int initialRadius = view.getWidth();
//Create the animation (the final radius is zero)
Animator animator =
ViewAnimationUtils.createCircularReveal(view, cx, cy, initialRadius, 0);
//Make the view GONE when the animation is done
animator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.GONE);
}
});
//Start the animation
animator.start();
}
If you set only GONE in the xml, the first time will never work because height/width/x/y/etc.. are 0. Also, if you just set INVISIBLE before the call to the animation it will not work as well, but if you start with visibility INVISIBLE it will initialize the layout params.
what i did is, Like i have two view with same height,As we now visibility gone returns 0 {height and width} than i am giving visible view height every time and its work for me.
The solution is don't get values directly into code
Either put the animation code on click and the values outside onclick
or get the values from other activity
By values i mean cardType.getWidth() and cardType.getHeight()

How can I repeat a property animation?

I'm doing an animation of bubbles on the screen, but the bubbles stop after finishing the animation time. How do I repeat the animation or make it infinite?
bub.animate();
bub.animate().x(x2).y(y2);
bub.animate().setDuration(animationTime);
bub.animate().setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
animators.add(animation);
}
#Override
public void onAnimationRepeat(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
}
});
Since ViewPropertyAnimator is only good for simple animations, use more advanced ObjectAnimator class - basically method setRepeatCount and additionally setRepeatMode.
This is actually possible. Here's an example of rotating a view:
final ViewPropertyAnimator animator = view.animate().rotation(360).setInterpolator(new LinearInterpolator()).setDuration(1000);
animator.setListener(new android.animation.Animator.AnimatorListener() {
...
#Override
public void onAnimationEnd(final android.animation.Animator animation) {
animation.setListener(null);
view.setRotation(0);
view.animate().rotation(360).setInterpolator(new LinearInterpolator()).setDuration(1000).setListener(this).start();
}
});
You can also use "withEndAction" instead of a listener.
You can use CycleInterpolator. For example, like this:
int durationMs = 60000;
int cycleDurationMs = 1000;
view.setAlpha(0f);
view.animate().alpha(1f)
.setInterpolator(new CycleInterpolator(durationMs / cycleDurationMs))
.setDuration(durationMs)
.start();
Here is an example in Kotlin with a simple way to repeat the animation by recursively calling it in withEndAction
Example
private var animationCount = 0
private fun gyrate() {
val scale = if (animationCount++ % 2 == 0) 0.92f else 1f
animate().scaleX(scale).scaleY(scale).setDuration(725).withEndAction(::gyrate)
}
This repeatedly animates the size of a view to get smaller, return to normal, get smaller, return to normal, etc. This is a pretty simple pattern to repeat whatever animation you'd like.
final ViewPropertyAnimator animator = view.animate().rotation(360).setInterpolator(new LinearInterpolator()).setDuration(1000); //Animator object
animator.setListener(new android.animation.Animator.AnimatorListener() {
...
#Override
public void onAnimationEnd(final android.animation.Animator animation) {
animation.setListener(this); //It listens for animation's ending and we are passing this to start onAniationEnd method when animation ends, So it works in loop
view.setRotation(0);
view.animate().rotation(360).setInterpolator(new LinearInterpolator()).setDuration(1000).setListener(this).start();
}
});
in kotlin you can do it like this. create a runnable. inside it animate the view and set withEndAction to runnable itself. and at the end run runnable to animation start.
var runnable: Runnable? = null
runnable = Runnable {
view.animate()
.setDuration(10000)
.rotationBy(360F)
.setInterpolator(LinearInterpolator())
.withEndAction(runnable)
.start()
}
runnable.run()

How to generate looping animation with ViewPropertyAnimator?

I want to build an animation of TextViews, which repeats itself just after completion.
For each View I want to animate, I use the following piece of code
final float oldX = v.getX();
final float newX = v.getX() - (float)totalWidth;
final AnimatorListenerAdapter listener = new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
v.setX(oldX);
animFinished = true;
//This line won't compile
//v.animate().setDuration(animDuration).setInterpolator(newsInterpolator)
// .setListener(listener).x(newX);
}
};
v.animate().setDuration(animDuration).setInterpolator(newsInterpolator)
.setListener(listener).x(newX);
I tried to place the last piece of code into the onAnimationEnd, but Java will not compile since it considers the object listener as not initialized. Moreover, I don't think that this "recursive" animation invocation is a good solution, it was the first thing which came to my mind. I am suspicious that there is a simple and sound way to implement looping property animation, but I failed to locate it, so I turned here for help.
Thanks in advance
Well, I am going to answer myself again.
TranslateAnimation class has methods about repeating the animation, so I used it instead of ViewPropertyAnimator.
The following code seems to work:
long duration = 1000* ((long)totalWidth / newsScrollSpeed);
System.out.println("totalWidth="+totalWidth);
TranslateAnimation anim = new TranslateAnimation(0,-totalWidth,0,0);
anim.setInterpolator(linearInterpolator);
anim.setDuration(duration);
anim.setRepeatCount(TranslateAnimation.INFINITE);
anim.setRepeatMode(TranslateAnimation.RESTART);
for(i=0;i<this.getChildCount();i++)
{
View v = this.getChildAt(i);
if(v.getId() == R.id.yuruyen_yazi)
{
continue;
}
v.startAnimation(anim);
}
Not elegant way, but it works:
Runnable runnable = new Runnable() {
#Override
public void run() {
// update newX
v.animate().setDuration(animDuration).setInterpolator(newsInterpolator).x(newX).withEndAction(this).start();
}
};
v.animate().setDuration(animDuration).setInterpolator(newsInterpolator).x(newX).withEndAction(runnable).start();

Android Simple TextView Animation

I've got a TextView that I would like to count down (3...2...1...stuff happens).
To make it a little more interesting, I want each digit to start at full opacity, and fade out to transparency.
Is there a simple way of doing this?
Try something like this:
private void countDown(final TextView tv, final int count) {
if (count == 0) {
tv.setText(""); //Note: the TextView will be visible again here.
return;
}
tv.setText(String.valueOf(count));
AlphaAnimation animation = new AlphaAnimation(1.0f, 0.0f);
animation.setDuration(1000);
animation.setAnimationListener(new AnimationListener() {
public void onAnimationEnd(Animation anim) {
countDown(tv, count - 1);
}
... //implement the other two methods
});
tv.startAnimation(animation);
}
I just typed it out, so it might not compile as is.
I've used a more conventional Android-style animation for this:
ValueAnimator animator = new ValueAnimator();
animator.setObjectValues(0, count);
animator.addUpdateListener(new AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
view.setText(String.valueOf(animation.getAnimatedValue()));
}
});
animator.setEvaluator(new TypeEvaluator<Integer>() {
public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
return Math.round((endValue - startValue) * fraction);
}
});
animator.setDuration(1000);
animator.start();
You can play with the 0 and count values to make the counter go from any number to any number, and play with the 1000 to set the duration of the entire animation.
Note that this supports Android API level 11 and above, but you can use the awesome nineoldandroids project to make it backward compatible easily.
Take a look at CountDownAnimation.
I first tried #dmon solution, but since every animation starts at the end of the previous one you end up having a delay after several calls.
So, I implemented CountDownAnimation class which uses a Handler and the postDelayed function. By default, it uses the alpha animation, but you can set any animation. You can download the project here.

Categories

Resources