Text Animation from left to right like shine in An

问题:

I don't know what type of animation it called, but I want to implement it as shown below. I saw that animation in iOS.

As you can see that, sentence slide to cancel will animate from left to right like there is a light behind it.

I don't know what to use. I tried some animation like Alpha, but can't achieve that. Can anyone help me?

回答1:

This is my demo, please try it

https://github.com/FrankNT/TextViewSlideEffect

Regards, Frank

回答2:

Here is another IOS like slide text effect,

https://github.com/RomainPiel/Shimmer-android

回答3:

Got solution by using Spannable

Following is Thread class which continuously run with interval of 100 ms.

class MyThread extends Thread {
    //used for stopping thread
    boolean flag; 

    //init flag to true so that method run continuously
    public MyThread() {
        flag = true;
    }

    //set flag false, if want to stop this thread
    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    @Override
    public void run() {
        super.run();
        while (flag) {
            try {
                Thread.sleep(intervalMiliSeconds);
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {

                        Spannable spn = new SpannableString(txtView
                                .getText().toString());
                        spn.setSpan(new ForegroundColorSpan(Color.WHITE),
                                startPosition, endPosition,
                                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                        txtView.setText(spn);

                        startPosition++;
                        endPosition++;
                        endPosition %= (lengthOfString + charGaps);
                        startPosition %= lengthOfString;

                        if (startPosition == 0) {
                            endPosition = charGaps;
                            startPosition = 0;
                        }

                        if (endPosition > lengthOfString) {
                            endPosition = lengthOfString;
                        }

                        Log.d("Home", "Start : " + startPosition + " End : " + endPosition);

                    }
                });
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

To use above code, use following implementation.

TextView txtView = (TextView) findViewById(R.id.txtView);

int charGaps = 3;

int startPosition = 0;
int endPosition = charGaps;

int lengthOfString = txtView.getText().length();

MyThread thread = new MyThread();

thread.start();

Output

Still better answers will be more appreciated.. :)

回答4:

I think you are talking about Shimmer Effect. Facebook made library for that. It will help you to show glow effect from left to right with many more options.

You can see full documentation there. Shimmer Library

回答5:

You have 2 ways:

1) working with openGL and use Shaders to make this effect.

2) create a layer above text which contains a [transparent][white][transparent] gradient and animate him.