android - कैसे ढाल चेतन करने के लिए?



animation gradient (1)

रंग # 1 से रंग # 2 में ढाल कैसे सजाना है? कुछ ऐसा ही है

मैं इसे इकाई के लिए स्वास्थ्य-बार के रूप में उपयोग करने की योजना बना रहा हूं (इसलिए, यह ग्रीन एंड से शुरू होने वाला फिनिट एनीमेशन होगा)


इसे googling करते समय, मुझे एंड्रॉइड के लिए ऐसा करने के 2 तरीके मिलते हैं : ShaderFactory का उपयोग करें या new Shader(new LinearGradient()) का उपयोग करके देखें। दोनों ही उत्तर ऐसा करते हैं - new Shader() View.onDraw(Canvas canvas) बुलाते हैं। प्रत्येक View.onDraw(Canvas canvas) पद्धति का कॉल। यह बहुत महंगा है अगर ऐसे एनिमेटेड ग्रेडियेंट की संख्या ~ 3 से अधिक

तो मैंने इसे दूसरे तरीके से किया। मैं हर सटीक LinearGradient का उपयोग करते हुए प्रत्येक LinearGradient onDraw() कॉल करने से बचा था। ऐसा कैसे दिखता है (gif, एनीमेशन क्षय हो):

यह चाल LinearGradient जो रंग है बनाने के लिए है View.getWidth() से बड़ा है। उसके बाद आप canvas.translate() उपयोग कर सकते हैं, जबकि canvas.translate() हुए, उसका रंग बदलने के लिए, इसलिए canvas.translate() कोई new कॉल नहीं।

ढाल बनाने के लिए, आपको वर्तमान चौड़ाई और ऊंचाई की आवश्यकता है मैंने इसे onSizeChanged() में किया था इसके अलावा मैं यहां Shader भी सेट कर रहा हूं।

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    width = getWidth();
    height = getHeight();

    LinearGradient gradient = new LinearGradient(
            0, height / 2, width * colors.length - 1, height / 2,
            colors, null, Shader.TileMode.REPEAT);
    fillPaint.setShader(gradient);

    shapePath = getParallelogrammPath(width, height, sidesGap);
    shapeBorderPath = getParallelogrammPath(width, height, sidesGap);
}

मैं समानांतर अनुकरण के दृश्यों के कारण पथ का उपयोग करता हूं, आप जो चाहें उपयोग कर सकते हैं। ड्राइंग को कार्यान्वित करते समय, आपको 2 चीजों को ध्यान में रखना चाहिए: वर्तमान भरपाई के लिए पूरे canvas का translate() करने की आवश्यकता है translate() offset() और offset() भरना आकार:

@Override
protected void onDraw(Canvas canvas) {
    canvas.save();
    canvas.translate(-gradientOffset, 0);
    shapePath.offset(gradientOffset, 0f, tempPath);
    canvas.drawPath(tempPath, fillPaint);
    canvas.restore();

    canvas.drawPath(shapeBorderPath, borderPaint);

    super.onDraw(canvas); // my View is FrameLayout, so need to call it after
}

इसके अलावा आपको canvas.save() और canvas.restore() उपयोग करना चाहिए। यह कैनवास के इनर मैट्रिक्स को ढेर करने के लिए बचाएगा और इसे तदनुसार बहाल करेगा।

तो पिछले आपको क्या करने की आवश्यकता है ढालऑफ़सेट को चेतन करना है आप ऑब्जेक्ट एन्निमेटर (प्रॉपर्टी एनीमेशन) जैसी सभी चीजों का उपयोग कर सकते हैं मैंने updateTick इस्तेमाल किया, क्योंकि मुझे updateTick को नियंत्रित करने की आवश्यकता थी और सीधे ऑफसेट शुरू करना यह मेरी अहसास है (थोड़ा मुश्किल और कठोर):

static public final int LIFETIME_DEAFULT = 2300;
private long lifetime = LIFETIME_DEAFULT, updateTickMs = 25, timeElapsed = 0;
private long accumulatorMs = 0;
private float gradientOffset = 0f;

public void startGradientAnimation() {
    stopGradientAnimation();
    resolveTimeElapsed();

    final float gradientOffsetCoef = (float) (updateTickMs) / lifetime;
    final int colorsCount = this.colors.length - 1;
    gradientAnimation.setTimeListener(new TimeAnimator.TimeListener() {
        @Override
        public void onTimeUpdate(TimeAnimator animation, long totalTime, long deltaTime) {
            final long gradientWidth = width * colorsCount;
            if (totalTime > (lifetime - timeElapsed)) {
                animation.cancel();
                gradientOffset = gradientWidth;
                invalidate();
            } else {
                accumulatorMs += deltaTime;

                final long gradientOffsetsCount = accumulatorMs / updateTickMs;
                gradientOffset += (gradientOffsetsCount * gradientWidth) * gradientOffsetCoef;
                accumulatorMs %= updateTickMs;

                boolean gradientOffsetChanged = (gradientOffsetsCount > 0) ? true : false;
                if (gradientOffsetChanged) {
                    invalidate();
                }
            }
        }
    });

    gradientAnimation.start();
}

आप यहां पा सकते हैं पूर्ण View कोड





ondraw