问题
I am working with the following Spannable and TextView like so and I've got it animating each character but I want to animate each word how can I accomplish that?
Looking to alpha in and translate each word (from the bottom of the location of each word).
By translating I mean a translate (move) animation.
Source:
private static class FadeyTextView extends TextView
{
private Interpolator mInterpolator;
private long mStart, mDurationPerLetter;
private boolean mAnimating = false;
private SpannableString mFadeyText;
private CharSequence mText;
public FadeyTextView(Context context)
{
super(context);
initView();
}
public FadeyTextView(Context context, AttributeSet attrs)
{
super(context, attrs);
initView();
}
public FadeyTextView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
initView();
}
private void initView()
{
// Set defaults
mInterpolator = new DecelerateInterpolator();
mDurationPerLetter = 250;
}
public void setInterpolator(Interpolator interpolator)
{
mInterpolator = interpolator;
}
public void setDurationPerLetter(long durationPerLetter)
{
mDurationPerLetter = durationPerLetter;
}
@Override
public void setText(CharSequence text, BufferType type)
{
mText = text;
mFadeyText = new SpannableString(text);
FadeyLetterSpan[] letters = mFadeyText.getSpans(0, mFadeyText.length(), FadeyLetterSpan.class);
for(FadeyLetterSpan letter : letters){
mFadeyText.removeSpan(letter);
}
final int length = mFadeyText.length();
for(int i = 0; i < length; i++){
mFadeyText.setSpan(new FadeyLetterSpan(), i, i + 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
}
super.setText(mFadeyText, BufferType.SPANNABLE);
mAnimating = true;
mStart = AnimationUtils.currentAnimationTimeMillis();
ViewCompat.postInvalidateOnAnimation(this);
}
@Override
@CapturedViewProperty
public CharSequence getText()
{
return mText;
}
public boolean isAnimating()
{
return mAnimating;
}
@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
if(mAnimating){
long mDelta = AnimationUtils.currentAnimationTimeMillis() - mStart;
FadeyLetterSpan[] letters = mFadeyText.getSpans(0, mFadeyText.length(), FadeyLetterSpan.class);
final int length = letters.length;
for(int i = 0; i < length; i++){
FadeyLetterSpan letter = letters[i];
float delta = (float)Math.max(Math.min((mDelta - (i * mDurationPerLetter)), mDurationPerLetter), 0);
letter.setAlpha(mInterpolator.getInterpolation(delta / (float)mDurationPerLetter));
}
if(mDelta < mDurationPerLetter * length){
ViewCompat.postInvalidateOnAnimation(this);
}else{
mAnimating = false;
}
}
}
private class FadeyLetterSpan extends CharacterStyle implements UpdateAppearance
{
private float mAlpha = 0.0f;
public void setAlpha(float alpha)
{
mAlpha = Math.max(Math.min(alpha, 1.0f), 0.0f);
}
@Override
public void updateDrawState(TextPaint tp)
{
int color = ((int)(0xFF * mAlpha) << 24) | (tp.getColor() & 0x00FFFFFF);
tp.setColor(color);
}
}
Update:
So I have it animating each word instead of each character now, the way I did it was to use a wrapper for each word to hold its start and end index values:
private static class IndexWrapper {
private int mStart;
private int mEnd;
public IndexWrapper(int start, int end) {
this.mStart = start;
this.mEnd = end;
}
public int getStart() {
return mStart;
}
public int getEnd() {
return mEnd;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + mEnd;
result = prime * result + mStart;
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
IndexWrapper other = (IndexWrapper) obj;
if (mEnd != other.mEnd)
return false;
if (mStart != other.mStart)
return false;
return true;
}
}
This is then called inside this function here to generate a List<IndexWrapper> indices:
private List<IndexWrapper> getAllIndexes(CharSequence text) {
// First convert to a string and return an empty array if no words
String s = text.toString();
if (TextUtils.isEmpty(s))
return null;
// Get the number of words
String[] words = text.toString().split("\\s+");
// For each word we need to find the indices and create FadeWordSpans for them
List<IndexWrapper> indices = new ArrayList<>();
for (String word : words) {
// Get our sub index values for each word
List<IndexWrapper> subIndices = findIndexesForEachWord(s, word);
// Add it to the list of indices
indices.addAll(subIndices);
}
// Return our list of all index wrappers
return indices;
}
private List<IndexWrapper> findIndexesForEachWord(String wholeString, String word) {
String regex = "\\b" + word + "\\b";
Pattern pattern = Pattern.compile(regex);
Matcher matcher = pattern.matcher(wholeString);
List<IndexWrapper> indices = new ArrayList<>();
while (matcher.find()) {
// Get start and end indexes
int start = matcher.start();
int end = matcher.end();
// Create a new index wrapper and add it to the our list
indices.add(new IndexWrapper(start, end));
}
return indices;
}
Once we have our List<IndexWrapper> indices we can then call this inside the setText(CharSequence text, BufferType type) function like so:
@Override
public void setText(CharSequence text, BufferType type) {
// Go ahead and set our text
this.mText = text;
// We need to initialize our SpannableString
this.mFadeText = new SpannableString(text);
// Go ahead and set our characters styles
FadeWordSpan[] letters = mFadeText.getSpans(0, mFadeText.length(), FadeWordSpan.class);
// For each word remove the span
for (FadeWordSpan fadeWordSpan : letters)
mFadeText.removeSpan(fadeWordSpan);
List<IndexWrapper> indices = getAllIndexes(mFadeText.toString());
final int length = indices != null ? indices.size() : 0;
for (int i = 0; i < length; i++) {
// Get index
IndexWrapper index = indices.get(i);
int start = index.getStart();
int end = index.getEnd();
mFadeText.setSpan(new FadeWordSpan(), start, end, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
}
super.setText(mFadeText, BufferType.SPANNABLE);
// Set animating to true
this.mIsAnimating = true;
// Set our start time and redraw on animation
mStart = AnimationUtils.currentAnimationTimeMillis();
ViewCompat.postInvalidateOnAnimation(this);
}
We can then animate in each word in the onDraw(Canvas canvas) function like so:
// If the view is animating (meaning we set the text) go ahead and draw the animations
if (mIsAnimating) {
long delta = AnimationUtils.currentAnimationTimeMillis() - mStart;
// Initialize our word span
FadeWordSpan[] words = mFadeText.getSpans(0, mFadeText.length(), FadeWordSpan.class);
// Get our length
final int length = words.length;
// For each letter animate in the word
for (int i = 0; i < length; i++){
// Get our word
FadeWordSpan word = words[i];
// Calculate our delta
float dx = (float) Math.max(Math.min((delta - (i * mDurationPerWord)), mDurationPerWord), 0);
// Set our interpolation alpha
word.setAlpha(mInterpolator.getInterpolation(dx / (float) mDurationPerWord));
}
// If our delta is less than the duration per word times the length then we need to keep re-drawing
if (delta < mDurationPerWord * length)
ViewCompat.postInvalidateOnAnimation(this);
else
mIsAnimating = false;
}
FadeWordSpan is the same as FadeyLetterSpan.
Still need an answer to translating (motion) text
来源：https://stackoverflow.com/questions/36953863/how-to-alpha-translate-animate-each-word-in-a-textview-instead-of-each-charact