समस्या घुमावदार एनीमेशन प्राप्त करने के लिए

Question

संभव डुप्लिकेट:
Android, move bitmap along a path?

मैं एक घुमावदार path.Is एंड्रॉयड में यह संभव के माध्यम से एक छवि ले जाना चाहते हैं? मैंने बहुत कुछ खोजा लेकिन मुझे केवल स्केल, घूर्णन और एनीमेशन का अनुवाद करने के बारे में पता चल सकता है। इसलिए किसी को भी कोई मदद है कृपया मदद करें। क्या यह एंड्रॉइड में संभव है?

Answer 1

आप फ़्रेम एनीमेशन द्वारा फ़्रेम कर सकते हैं। आप एक वक्र बनाने के लिए चरण-दर-चरण स्थिति को स्थानांतरित कर सकते हैं। यह सीमित पुन: उपयोग होगा, लेकिन आप इसे कर सकते हैं।

या आप टिवनीएनीमेशन के उप-वर्ग बनाने के लिए अपनी खुद की एनीमेशन लिख सकते हैं जो वक्र के साथ एनिमेट कर सकता है। यदि आप गणित के साथ अच्छे हैं और बेजियर वक्र को समझ सकते हैं तो यह एक सीधा आगे विकल्प हो सकता है। एक बार जब आप उस कक्षा में हों तो आप आसानी से किसी भी घुमावदार पथ पर एनिमेट कर सकते हैं, लेकिन यह और अधिक काम है।

http://www.math.ubc.ca/~cass/gfx/bezier.html

Answer 2

नीचे पूरी तरह से कामकाज कोड है कि एक घुमावदार मार्ग तीन अंक से परिभाषित किया गया साथ चेतन जाएगा:

http://en.wikipedia.org/wiki/B%C3%A9zier_curve

यहाँ कुछ जावा कोड है। एक बिंदु सिर्फ एक वर्ग है जिसमें एक x मान और एक y मान होता है (हालांकि आप इसे अधिक आयामों के लिए आसानी से बढ़ा सकते हैं)।

सभी एम चर अनुवाद अनुवाद से लिया जाता है और इसी तरह से उपयोग किया जाता है, इसलिए यदि आप कुछ समझ में नहीं आते हैं तो आप इसे अनुवाद एनीमेशन कोड अपेक्षाकृत ईसाइली से तुलना करने में सक्षम होना चाहिए।

हल करने के लिए कॉल प्रारंभ करने के लिए आकार का मतलब है कि आप किसी भी प्रकार के एनिमेशन प्रकार (ABSOLUTE, RELATIVE_TO_SELF, RELATIVE_TO_PARENT) का उपयोग करके चाप के प्रारंभ, अंत और त्रिज्या को निर्दिष्ट कर सकते हैं जैसा कि आप सामान्य अनुवादएनीकरण के लिए करेंगे।

कैल्कबीज़ियर Wikipedia से सीधे ले जाने वाले वर्गिक बेजियर वक्र की गणना करता है। बेजियर वक्र को चिकनी स्केलिंग के लिए अनुमति दी जाती है और ग्राफिक्स में आम है (और एंड्रॉइड के पथ वर्ग में भी उपयोग किया जाता है)।

वास्तविक आंदोलन लागू करने में होता है ट्रांसफॉर्मेशन। इंटरपोलेटेडटाइम 0 और 1 के बीच एक मान देता है, जो प्रदान किए गए इंटरपोलेटर के आधार पर nonlinearly बढ़ता है। डीएक्स और डीई वास्तविक समय और वाई अंक दिए गए समय के लिए वक्र के साथ हैं।

इस वर्ग की एकमात्र सीमा यह है कि वाई में सबसे बड़ा परिवर्तन हमेशा वक्र के केंद्र में होता है (आरंभ में मध्यवर्ती के लिए गणना देखें)। हालांकि, संशोधित करना आसान होगा, उदाहरण के लिए, वक्र के साथ एक विशेष बिंदु देने के लिए जिस पर उच्च बिंदु होना चाहिए यदि आप एक गैर-सममित वक्र चाहते हैं।

अनुवाद एनीमेशन के लिए एंड्रॉइड कोड को देखते हुए विशेष रूप से सहायक था।देखें: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.3.5_r1/android/view/animation/TranslateAnimation.java#TranslateAnimation

public class ArcTranslate extends Animation { 

private Point start; 
private Point end; 
private Point middle; 
private final float mFromXValue; 
private final float mToXValue; 
private final float mYValue; 
private final int mFromXType; 
private final int mToXType; 
private final int mYType; 

/** 
* A translation along an arc defined by three points and a Bezier Curve 
* 
* @param duration - the time in ms it will take for the translation to complete 
* @param fromXType - One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT. 
* @param fromXValue - Change in X coordinate to apply at the start of the animation 
* @param toXType - One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT. 
* @param toXValue - Change in X coordinate to apply at the end of the animation 
* @param yType - One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT. 
* @param yValue - Change in Y coordinate to apply at the middle of the animation (the radius of the arc) 
*/ 
public ArcTranslate(long duration, int fromXType, float fromXValue, 
     int toXType, float toXValue, int yType, float yValue){ 
    setDuration(duration); 

    mFromXValue = fromXValue; 
    mToXValue = toXValue; 
    mYValue = yValue; 

    mFromXType = fromXType; 
    mToXType = toXType; 
    mYType = yType; 

} 

/** Calculate the position on a quadratic bezier curve given three points 
* and the percentage of time passed. 
* from http://en.wikipedia.org/wiki/B%C3%A9zier_curve 
* @param interpolatedTime - the fraction of the duration that has passed where 0<=time<=1 
* @param p0 - a single dimension of the starting point 
* @param p1 - a single dimension of the middle point 
* @param p2 - a single dimension of the ending point 
*/ 
private long calcBezier(float interpolatedTime, float p0, float p1, float p2){ 
    return Math.round((Math.pow((1 - interpolatedTime), 2) * p0) 
      + (2 * (1 - interpolatedTime) * interpolatedTime * p1) 
      + (Math.pow(interpolatedTime, 2) * p2)); 
} 

@Override 
protected void applyTransformation(float interpolatedTime, Transformation t) { 
    float dx = calcBezier(interpolatedTime, start.x, middle.x, end.x); 
    float dy = calcBezier(interpolatedTime, start.y, middle.y, end.y); 

    t.getMatrix().setTranslate(dx, dy); 
} 

@Override 
public void initialize(int width, int height, int parentWidth, int parentHeight) { 
    super.initialize(width, height, parentWidth, parentHeight); 
    float startX = resolveSize(mFromXType, mFromXValue, width, parentWidth); 
    float endX = resolveSize(mToXType, mToXValue, width, parentWidth); 
    float middleY = resolveSize(mYType, mYValue, width, parentWidth); 
    float middleX = startX + ((endX-startX)/2); 
    start = new Point(startX, 0); 
    end = new Point(endX, 0); 
    middle = new Point(middleX, middleY); 
} 
} 

Answer 3

आप इस तरह अपने ही वर्ग बना सकते हैं:

public class BezierTranslateAnimation extends TranslateAnimation { 

private int mFromXType = ABSOLUTE; 
private int mToXType  = ABSOLUTE; 
private int mFromYType = ABSOLUTE; 
private int mToYType  = ABSOLUTE; 
private float mFromXValue = 0.0f; 
private float mToXValue = 0.0f; 
private float mFromYValue = 0.0f; 
private float mToYValue = 0.0f; 
private float mFromXDelta; 
private float mToXDelta; 
private float mFromYDelta; 
private float mToYDelta; 
private float mBezierXDelta; 
private float mBezierYDelta; 

public BezierTranslateAnimation(float fromXDelta, float toXDelta,float fromYDelta, float toYDelta, float bezierXDelta, float bezierYDelta) { 
    super(fromXDelta, toXDelta, fromYDelta, toYDelta); 

     mFromXValue = fromXDelta; 
     mToXValue = toXDelta; 
     mFromYValue = fromYDelta; 
     mToYValue = toYDelta; 
     mFromXType = ABSOLUTE; 
     mToXType = ABSOLUTE; 
     mFromYType = ABSOLUTE; 
     mToYType = ABSOLUTE; 
     mBezierXDelta = bezierXDelta; 
     mBezierYDelta = bezierYDelta; 

} 



@Override 
protected void applyTransformation(float interpolatedTime, Transformation t) { 

    float dx=0,dy=0; 

    if (mFromXValue != mToXValue) { 

     dx = (float) ((1.0-interpolatedTime)*(1.0-interpolatedTime)*mFromXValue + 2.0*interpolatedTime*(1.0-interpolatedTime)*mBezierXDelta + interpolatedTime*interpolatedTime*mToXValue); 
    } 

    if (mFromYValue != mToYValue) { 

     dy = (float) ((1.0-interpolatedTime)*(1.0-interpolatedTime)*mFromYValue + 2.0*interpolatedTime*(1.0-interpolatedTime)*mBezierYDelta + interpolatedTime*interpolatedTime*mToYValue); 
    } 

    t.getMatrix().setTranslate(dx, dy); 

    } 

} 

फिर इस हस्ताक्षर के साथ इसका इस्तेमाल:

BezierTranslateAnimation(float fromXDelta, float toXDelta,float fromYDelta, float toYDelta, float bezierXDelta, float bezierYDelta); 

Answer 4

यह Monkeyless के जवाब से प्रेरित था। मैंने एनीमेशन का उप-वर्ग बनाया, अनुवाद की गणना करने के लिए पथमेज़र का उपयोग करें। आप पथ के साथ एक नया पथ एनीमेशन बना सकते हैं, और इसे किसी भी अन्य एनिमेशन की तरह उपयोग कर सकते हैं।

https://github.com/coocood/PathAnimation

public class PathAnimation extends Animation { 
private PathMeasure measure; 
private float[] pos = new float[2]; 
public PathAnimation(Path path) { 
    measure = new PathMeasure(path, false); 
} 

@Override 
protected void applyTransformation(float interpolatedTime, Transformation t){ 
    measure.getPosTan(measure.getLength() * interpolatedTime, pos,null); 
    t.getMatrix().setTranslate(pos[0], pos[1]); 
} 
}