Une imitation vue personnalisée éclipse

I, les mots EDITORIAL

Effet comme indiqué ci-dessus, l'auteur au moment de la pause déjeuner, re-chase à nouveau détective Di Renjie II, conspiré utiliser Eclipse esprit de serpent, cité eau Luo Wu Zhou subvertir le bateau. éclipse solaire est, monde sombre, après l'éclipse de toutes les choses de réponse claire. Après avoir lu une pensée, ou je n'ai pas voir un effet d'éclipse solaire, puis, il y a cet article.

En second lieu, l'analyse d'animation

Tout d'abord, il y a un cercle, un nom, appelé le Soleil (Sun), Moon (Lune) glisser lentement du Soleil, et que les deux cercles se chevauchent, l'arrière-plan devient sombre, lorsque la coïncidence complète de la profondeur maximale, Sun Moon lentement, puis séparés, séparés quand la couleur de fond fanée, et enfin la restitution, le logo apparaît. Il y a deux points techniques, le premier contrôle est la couleur de fond, seul le second tour est la partie chevauchée Lune et du Soleil est visible, le reste n'est pas visible, de sorte que l'éclipse est réaliste.

En troisième lieu, la peinture (onDraw)

//draw太阳
        canvas?.drawCircle(centerX.toFloat(), centerY.toFloat(), mSunR.toFloat(), mSunPaint)

Tout d'abord, dessiner un cercle que le soleil. Donc, la lune ne dessine pas un petit cercle de la même manière? Eh bien, pas exactement, si la même façon, un cercle dessiné sur la couverture arrière dans la lune, l'éclipse réelle car une grande luminosité du soleil, pour voir la lune sur le soleil à l'œil nu, donc nous utilisons ce genre de choses à PorterDuffXfermode comme suit:

        xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP)

Ce mode a une grande variété, ce n'est pas l'objet de cet article, ne sera pas discuté, probablement des moyens qui ne se chevauchent partiellement visibles. Vidéos section de lune comme illustré ci-dessous

        //draw月亮
        mSunPaint.color = mMoonColor

        mSunPaint.xfermode = xfermode
        canvas?.drawCircle(mMoonX.toFloat(), centerY.toFloat(), mMoonR.toFloat(), mSunPaint)
        mSunPaint.xfermode = null

Prochain tirage logo, pour être le premier coup après le tirage dans le Soleil et la Lune, et avant la lune dans la peinture. La partie de code complet afin onDraw

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        mSunPaint.color = mSunColor
        //draw太阳
        canvas?.drawCircle(centerX.toFloat(), centerY.toFloat(), mSunR.toFloat(), mSunPaint)

        if (isLogoShow) {
            mLogoPaint.xfermode = xfermode
            canvas?.drawBitmap(mLogoBitmap, mLogoBitmapSrcRect, mLogoBitmapDesRect, mLogoPaint)
            mLogoPaint.xfermode = null
        }
        //draw月亮
        mSunPaint.color = mMoonColor

        mSunPaint.xfermode = xfermode
        canvas?.drawCircle(mMoonX.toFloat(), centerY.toFloat(), mMoonR.toFloat(), mSunPaint)
        mSunPaint.xfermode = null

    }

Les éléments sont bien dessinés, il est de les laisser prendre le relais de se déplacer, j'utilise une implémentation de gestionnaire. La première est d'entrer dans l'animation, chaque changement de la coordonnée X Lune

 MSG_IN -> {
                if (mMoonX < centerX) {
                    mMoonX += mMoonXOffset
                    invalidate()
                    it.target.sendEmptyMessageDelayed(MSG_IN, mAnimationSpeed)
                } else if (kotlin.math.abs(mMoonX - centerX) <= mMoonXOffset) {
                    isLogoShow = true
                    invalidate()
                    it.target.sendEmptyMessageDelayed(MSG_OUT, 500)
                }
                progressOffset = txfloat((mMoonX - mMoonStartX), (4 * mSunR))

            }

Sortie et animation d'animation d'entrée également à faire, mais pour dessiner le logo, l'opacité de la brosse progressivement augmente, ne figurent pas dans le logo trop importune.

MSG_OUT -> {
                if (mMoonX - centerX < 2 * mSunR) {
                    mMoonX += mMoonXOffset
                    var tempAlpha = 255 * (mMoonX - centerX) / (2 * mSunR)
                    if (tempAlpha > mLogoPaint.alpha) {
                        if (tempAlpha > 255) {
                            tempAlpha = 255
                        }
                        mLogoPaint.alpha = tempAlpha
                    }
                    invalidate()
                    it.target.sendEmptyMessageDelayed(MSG_OUT, mAnimationSpeed)
                }
                progressOffset = txfloat((mMoonX - mMoonStartX), (4 * mSunR))

            }

Ensuite, il y a la couleur de fond change ici, je vais vous donner une méthode de calcul de couleur.

/**
     * 根据fraction值来计算当前的颜色。
     */
    private fun getCurrentColor(fraction: Float, startColor: Int, endColor: Int): Int {
        val redCurrent: Int
        val blueCurrent: Int
        val greenCurrent: Int
        val alphaCurrent: Int
        val redStart = Color.red(startColor)
        val blueStart = Color.blue(startColor)
        val greenStart = Color.green(startColor)
        val alphaStart = Color.alpha(startColor)
        val redEnd = Color.red(endColor)
        val blueEnd = Color.blue(endColor)
        val greenEnd = Color.green(endColor)
        val alphaEnd = Color.alpha(endColor)
        val redDifference = redEnd - redStart
        val blueDifference = blueEnd - blueStart
        val greenDifference = greenEnd - greenStart
        val alphaDifference = alphaEnd - alphaStart
        redCurrent = (redStart + fraction * redDifference).toInt()
        blueCurrent = (blueStart + fraction * blueDifference).toInt()
        greenCurrent = (greenStart + fraction * greenDifference).toInt()
        alphaCurrent = (alphaStart + fraction * alphaDifference).toInt()
        return Color.argb(alphaCurrent, redCurrent, greenCurrent, blueCurrent)
    }

Nous avons besoin d'un fond de rappel à travers l'auditeur, de sorte que le point de vue de la mise en page de parent d'atteindre. Pourquoi? Parce que si nous avons établi un fond dans le contrôle interne, la méthode de peinture par xfermode Lune en arrière-plan sur l'ensemble visible (nous avons demandé éclipse la Lune était visible que dans le chevauchement partiel avec Sun)

   if (it.what == MSG_IN || it.what == MSG_OUT) {
            val color = if (progressOffset * 2 > 1) {
                getCurrentColor(2 - progressOffset * 2, mBgStartColor, mBgEndColor)
            } else {
                getCurrentColor(progressOffset * 2, mBgStartColor, mBgEndColor)
            }
            eclipseListener?.onColor(color)
        }

De cette façon, nous éclipse est terminée.

Quatrièmement, l'utilisation

Ajoutez dans votre build.gradle racine à la fin des dépôts:

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

Ajouter la dépendance

	dependencies {
	        implementation 'com.github.cqcby1994:MyView:1.2.1'
	}

<com.chen.eclipseview.EclipseLogo
        android:id="@+id/eclipse_view"
        app:logoSize="large"
        app:speed="middle"
        app:sunColor="@android:color/white"
        app:moonColor="#279536"
        app:endBackgroundColor="#279536"
        app:startBackgroundColor="@android:color/white"
        app:logoSrc="@mipmap/wechat"
        android:layout_width="200dp"
        android:layout_height="200dp"
 />

 Vous pouvez définir leurs propres paramètres de vitesse (vitesse), le logo, la taille du logo, la couleur et ainsi de suite.

github: Point de me voir

Si vous vous sentez bien, les petites mains Dodo, encourager l'encouragement à l'auteur une star, si vous aviez voulu atteindre et moi-même sommes prêts à le contrôle des changes, vous pouvez laisser un commentaire ci-dessous, je vous remercie.