🎡 ♀️ 🗾 एक मनमाना वक्र के साथ एक छवि चलती है 💞 👩‍🎓 👨‍🎓

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

//  List<PointF> aPoints = new ArrayList<PointF>(); aPoints.add(new PointF(10f, 160f)); aPoints.add(new PointF(100f, 100f)); aPoints.add(new PointF(300f, 220f)); aPoints.add(new PointF(640f, 180f)); //   Path ptCurve = new Path(); PointF point = aPoints.get(0); ptCurve.moveTo(point.x, point.y); for(int i = 0; i < aPoints.size() - 1; i++){ point = aPoints.get(i); PointF next = aPoints.get(i+1); ptCurve.quadTo( point.x, point.y, (next.x + point.x) / 2, (point.y + next.y) / 2 ); }

कार्य हमारी तस्वीर को खींचने के लिए हमारे वक्र पर बिंदुओं के निर्देशांक प्राप्त करना है। ऐसा करने के लिए, PathMeasure वर्ग का उपयोग करें। इस वर्ग का उपयोग करते हुए, वक्र की लंबाई "माप"। और वांछित बिंदु को खोजने के लिए, आप इस वर्ग के ऑब्जेक्ट को पास कर सकते हैं जिसके द्वारा बिंदु को शुरुआत से हटा दिया जाता है।

इसलिए, उदाहरण के लिए, आप वक्र के बीच में बिंदु के निर्देशांक प्राप्त कर सकते हैं:

  PathMeasure pm = new PathMeasure(ptCurve, false); float afP[] = {0f, 0f}; //   pm.getPosTan(pm.getLength() * 0.5f, afP, null);

अंतिम पैरामीटर (मैंने वहां null पारित किया) कर सकते हैं, इसी तरह निर्देशांक में, इस बिंदु पर स्पर्शरेखा पैरामीटर प्राप्त करें।

इसके अलावा, एक getMatrix विधि है, जो एक तैयार किए गए परिवर्तन मैट्रिक्स को देती है - ऑफसेट और वांछित घुमाव। हम इसका उपयोग स्प्राइट को प्रदर्शित करने के लिए करेंगे।

  Matrix mxTransform = new Matrix(); pm.getMatrix( pm.getLength() * 0.5f, mxTransform, PathMeasure.POSITION_MATRIX_FLAG + PathMeasure.TANGENT_MATRIX_FLAG ); mxTransform.preTranslate(-bmSprite.getWidth(), -bmSprite.getHeight()); canvas.drawBitmap(bmSprite, mxTransform, null);

यह वही निकला जो आवश्यक था:

पूरा कोड नीचे दिया गया है या आप प्रोजेक्ट को रिपॉजिटरी से डाउनलोड कर सकते हैं - स्प्राइटअलैंगपाथ या मर्क्यूरियल का उपयोग कर सकते हैं - hg clone bitbucket.org/TedBeer/spritealongpath hg clone bitbucket.org/TedBeer/spritealongpath

 /** * User: TedBeer * Date: 30/01/12 * Time: 12:32 */ package net.tedbeer; import android.app.Activity; import android.os.Bundle; import android.content.Context; import android.graphics.*; import android.util.Log; import android.view.Display; import android.view.MotionEvent; import android.view.View; import android.view.WindowManager; import android.widget.Toast; import java.util.*; public class moveSprite extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new SceneView(this)); } } public class SceneView extends View { private static Bitmap bmSprite; private static Bitmap bmBackground; private static Rect rSrc, rDest; //animation step private static int iMaxAnimationStep = 20; private int iCurStep = 0; //points defining our curve private List<PointF> aPoints = new ArrayList<PointF>(); private Paint paint; private Path ptCurve = new Path(); //curve private PathMeasure pm; //curve measure private float fSegmentLen; //curve segment length public SceneView(Context context) { super(context); //destination rectangle Display display = ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); rDest = new Rect(0, 0, display.getWidth(), display.getHeight()); //load background if (bmBackground == null) { bmBackground = BitmapFactory.decodeResource(getResources(), R.drawable.winter_mountains); rSrc = new Rect(0, 0, bmBackground.getWidth(), bmBackground.getHeight()); } //load sprite if (bmSprite == null) bmSprite = BitmapFactory.decodeResource(getResources(), R.drawable.sledge3); //init random set of points aPoints.add(new PointF(10f, 160f)); aPoints.add(new PointF(100f, 100f)); aPoints.add(new PointF(300f, 220f)); aPoints.add(new PointF(640f, 180f)); //init smooth curve PointF point = aPoints.get(0); ptCurve.moveTo(point.x, point.y); for(int i = 0; i < aPoints.size() - 1; i++){ point = aPoints.get(i); PointF next = aPoints.get(i+1); ptCurve.quadTo(point.x, point.y, (next.x + point.x) / 2, (point.y + next.y) / 2); } pm = new PathMeasure(ptCurve, false); fSegmentLen = pm.getLength() / iMaxAnimationStep;//20 animation steps //init paint object paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(3); paint.setColor(Color.rgb(0, 148, 255)); } @Override protected void onDraw(Canvas canvas) { canvas.drawBitmap(bmBackground, rSrc, rDest, null); canvas.drawPath(ptCurve, paint); //animate the sprite Matrix mxTransform = new Matrix(); if (iCurStep <= iMaxAnimationStep) { pm.getMatrix(fSegmentLen * iCurStep, mxTransform, PathMeasure.POSITION_MATRIX_FLAG + PathMeasure.TANGENT_MATRIX_FLAG); mxTransform.preTranslate(-bmSprite.getWidth(), -bmSprite.getHeight()); canvas.drawBitmap(bmSprite, mxTransform, null); iCurStep++; //advance to the next step invalidate(); } else { iCurStep = 0; } } @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN ) { //run animation invalidate(); return true; } return false; } }

अपडेट: वीडियो को दूसरे के साथ बदल दिया, जहां यह स्पष्ट रूप से दिखाई दे रहा है कि स्प्राइट भी घूमता है।
ट्विन-एंग शाखा को रिपॉजिटरी में जोड़ा गया है, जहां टिप्पणी में निर्दिष्ट जावा-यूनिवर्सल-ट्वीन-इंजन का उपयोग एनीमेशन के लिए किया जाता है

एक मनमाना वक्र के साथ एक छवि चलती है

More articles: