Fra design til Android, del 2

Det er længe siden mit forrige indlæg, der er sket mange ting siden da, men endelig er her. Jeg håber at du nyder det!.

Dette er en ny historie i min serie af artikler kaldet 'Fra design til android', hvis du husker den første del af disse serier, vælger jeg et designkoncept, som jeg finder interessant, og jeg prøver at implementere det på Android, med fokus på nogle interessante emner undervejs fra mit Android-udviklerperspektiv.

Alle koder, der er nævnt i dette indlæg, kan findes på dette Github-arkiv

Dette er det koncept, jeg har valgt til denne del:

Google-virksomhed - Slider af Johny Vino

Jeg brugte igen et koncept fra Johny Vino.

Prøv at stoppe et øjeblik for at finde ud af, hvordan du er en Android-udvikler, som du er, hvordan du implementerer denne skærm.

Hvis du opdagede to af de følgende punkter, var du måske enig med mig, ved første øjekast var der to dele, der kom op i tankerne:

  • Sådan implementeres naturligvis bygningens animation.
  • Denne søgestang er måske ikke så triviel, som den burde være

Animering af bygningen

Lad os sætte denne øvelse på et perfekt miljø, vi kan muligvis bede vores designer (er) om at oprette animationen. Efter måske, nogle After Effects-arbejde + Bodymovins plugin, kunne de give os den ønskede animerede vektortegning.

Eller ..., vi har måske overhovedet ingen designer, og du er en modig og ensom udvikler, der skal have dette gjort uden meget designfærdigheder, lad os prøve den vej.

Arbejde med vektorer

Med noget mindre arbejde på et vektorbaseret værktøj som Sketch eller BoxySvg kunne vi let vektorisere bygningsbilledet. Gruppering af de dele, der vil blive animeret i grupper, vil være nyttige til et næste punkt.

Oprettelse af det ønskede billede på Sketch

Dernæst kommer et nyt fantastisk værktøj til scenen, og dette er Shape Shifter fra Alex Lockwood. Dette fantastiske værktøj hjælper dig med at animere SVG-baserede billeder og eksportere disse animationer til en AVD blandt andre formater.

Formskifter

Efter at have oprettet den ønskede effekt med et par klik, kan vi eksportere vores friske animerede vektortegnelige, indsætte den i Android Studio, binde den til en ImageView, og vi er færdige !.

(img_building.drawable som animatable) .start ()
Eksporteret ShapeFilter's avd kører på en Android-enhed

Ja, forbløffende, ikke? Vi har lige bygget en fantastisk animation ubesværet, men hvis vi igen ser på Johny Vinos koncept, har vi savnet mindre detaljer. Animationen håndteres af en diaslinje (kendt som Seekbar på Android), der håndterer animationens størrelse afhængigt af barens fremskridt.

Så hvad vi har brug for er indtil videre at indstille fremdriften for animationen inden for en AVD. Nå, det understøttes ikke i øjeblikket fra det, jeg har set, (Lottie gør det). Vi har bare vores disponible metoder som, .start (), .stop () og nulstil ().

På dette tidspunkt kunne vi prøve følgende:

Eller bliv ved med, lad os bare gentage lidt mere.

Animerede selektegninger

I vores nuværende punkt har vi en animation, der skal kommanderes til at gå til en bestemt ramme, når SeekBar når en bestemt position. Med andre ord har vi nogle tilstande under animationen.

Lad os erklære nogle attributter til definition af disse rammer eller tilstande.


    
    
    
    
    
    

Lad mig på dette punkt introducere en måske ikke kendt tegning, AnimatedStateListDrawable, som helt vil redde vores dag.

Lad os referere til Android-dokumentationen:

Tegnelig indeholdende et sæt tegnbare nøglerammer, hvor den aktuelt viste nøgleramme vælges baseret på det aktuelle tilstandssæt. Animationer mellem nøglerammer kan eventuelt defineres ved hjælp af overgangselementer.
Denne tegning kan defineres i en XML-fil med -elementet. Hver keyframe Drawable er defineret i et indlejret element. Overgange er defineret i et indlejret -element.

Ser noget, hvad vi leder efter, ikke? Vi kunne definere nogle , som identificerer de forskellige rammer i vores animation, og overgange til, hvordan et element overføres til et andet.

Da hvert -mærke repræsenterer vores ramme, definerer vi tre af dem, hver af dem sammensat af en tegning, der kan tegnes i vektor.

trækbare / vd_building1.xml
trækbare / vd_building2.xml
trækbare / vd_building3.xml

Og hver repræsenterer, hvordan en overgang til en anden, vi har brug for 4 til overgang gennem alle rammer frem og tilbage.

Med den ovennævnte Shape Shifter kan vi nemt eksportere de krævede AVD'er til Android Studio, der fungerer som overgange i AnimationStateListDrawable.

trækbare / avd_building_1_2
trækbare / avd_building_2_3
trækbare / avd_building_3_2
trækbare / avd_building_2_1
avd_building_1_2.xmlavd_building_2_3.xml

Og endelig hele AnimatedStateDrawable, vi lige har bygget:




    

    

    

    

    

    

    

Når vi justerer lidt på vores aktivitet og vores layout, indstiller vi denne fantastiske AnimatedSelectorDrawable til en ImageView som kilderessource, og bruger setImageState-metoden med den ønskede tilstand, animationen fungerer magisk som forventet.

privat val STATE_ZERO = intArrayOf (
        R.attr.state_zero, -R.attr.state_one, -R.attr.state_two
)

privat val STATE_ONE = intArrayOf (
        -R.attr.state_zero, R.attr.state_one, -R.attr.state_two
)

privat val STATE_TWO = intArrayOf (
        -R.attr.state_zero, -R.attr.state_one, R.attr.state_two
)
privat sjov onSeekProgressChanged (position: Int) {
    val max = seekbar.max

    val businessType = når (position) {
        i 0..max / 3 -> STATE_ZERO
        om 10..maks / 2 -> STATE_ONE
        i 20..max / 1 -> STATE_TWO
        andet -> smid IllegalStateException ()
    }

    imageView.setImageState (forretningstype, sandt)
}

Resultat:

Animering af Seekbar's tommelfinger

Yai! Indtil videre har vi nået et af mine to varme punkter, det andet er at styre, hvordan man animerer Seekbar-tommelfingerens størrelse under fremskridt, som Johny Vino gør i sit koncept:

Størrelse på søgestangens tommelfinger ved trækning

Vi kan skelne mellem to adfærd her:

  • Tommelfingerstørrelsen øges på en eller anden måde i forbindelse med fremskridt
  • Når du frigiver, udføres en slags overspilning af animationen

Et besøg på ScaleDrawable

Andet ukendt trækbar (i det mindste for mig) er ScaleDrawable, lad os igen henvise til Android-dokumentationen:

En tegning, der ændrer størrelsen på en anden tegning, der er baseret på dens aktuelle niveauværdi. Du kan kontrollere, hvor meget barnet Tegnelig ændrer i bredde og højde baseret på niveauet, samt en tyngdekraft til at kontrollere, hvor det placeres i dets samlede beholder. Oftest brugt til at implementere ting som progress barer.
Standardniveauet kan specificeres fra XML ved hjælp af egenskaben Android: niveau. Når denne egenskab ikke er specificeret, er standardniveauet 0, hvilket svarer til nulhøjde og / eller bredde afhængigt af de angivne værdier for android.R.styleable # ScaleDrawable_scaleWidth scaleWidthand android.R.styleable # ScaleDrawable_scaleHeight scaleHeight. Ved kørsel kan niveauet indstilles via setLevel (int).

Så det ser ud til, at vi kunne definere en form for trækbar, der vil henvise til en anden trækbar, et niveau og en skalafaktor. Hvis vi knytter barens fremskridt til dette niveau, skal det fungere, ikke?

Lad os definere en lagliste med trækbare ting, og da vi kun ønsker, at den blå del skaleres, skal vi pakke den ind i en ScaleDrawable.



    
        

            
              
                                                                                                                        

Som du ser, ved hjælp af værktøjet, kan vi indtaste de krævede attributter lige i

thumb <layer-list> indeholdende en ScaleDrawable

Nu er vi bare nødt til at finpusse vores aktivitet igen for at indstille niveauet for ScaleDrawable, lige når fremgangen med SeekBar ændres, og bemærk også, hvad det er rart, at vi kan bruge niveauegenskaben fra Tegnelig tommelfingeren.

privat sjov onSeekProgressChanged (position: Int) {
    // ...
    
    ((seekbar.hops som LayerDrawable)). niveau =
            (position * (SCALE_MAX / seekbar.max))
}

Og resultatet:

Nu er vi bare nødt til at animere tommelfingeren, når vi frigiver, vi kan slippe af med det ved hjælp af ScaleDrawable og en ValueAnimator.

privat sjov animateThumbRelease () {
    val thumb = seekbar.tum
    val initLevel = thumb.level
    val maxLevel = thumb.level * THUMB_RELEASE_SCALE_FACTOR
    val animator = ValueAnimator.ofInt (
            initLevel, maxLevel, initLevel)

    med (animator) {
        interpolator = OVERSHOOT
        varighed = THUMB_SCALE_DURATION

        addUpdateListener {
            thumb.level = it.animatedValue som Int
        }

        Start()
    }
}

Resultat:

Afslutter

På dette tidspunkt har vi løst problemet med animationen, og derefter den med Seekbar, med et par mere trivielle ændringer som at oprette en AVD til de bevægelige skyer, bruge den nye skrifttype som ressource kapacitet til vores tekster og tilføje et nyt nyt adaptivt ikon, vi har noget, der ligner Johny Vinos koncept.

Jeg håber, du nød under vejen, og hvis du er nødt til at dræbe mig, fordi noget, skal du gøre det med en dejlig kommentar og en aggressiv emoji.

Endelig resultat:

Github-arkiv

her

Referencer

  • VectorDrawable adaptive ikoner, Ian Lake
  • Designe Adaptive Icons, Nick Butcher
  • Shape Shifter, Alex Lockwood
  • En introduktion til ikonanimationsteknikker, Alex Lockwood
  • adp-dejlige detaljer, Alex Lockwood
  • Hvordan vi designer en smuk animation, Jeremie Martinez