Hoe een animatie-effect "Toevoegen aan leeslijst" te creëren

Ik probeer een animatie-effect te maken vergelijkbaar met dat van Safari (iPhone) wanneer je een element aan de leeslijst toevoegt. Het is vergelijkbaar met het item dat verschijnt bij het downloaden van een item vanuit de App Store-toepassing: het toepassingsitem wordt naar het dock gedownload om het downloaden te starten. Eerst botst het op en gaat dan naar het dok. Het is een erg leuk effect dat Apple gebruikt op hun besturingssysteem.

Ik heb een beeldweergave op het scherm die ik met dit soort animatie naar mijn werkbalk in mijn toepassing wil laten vallen.

Als er iemand is die dit heeft gedaan of weet wat de naam van het effect is, kunt u me vertellen hoe u dit moet doen.

Dank je.

1

1 antwoord

"Toevoegen aan leeslijst" toont geen animatie op mijn telefoon maar volgens jouw beschrijving klinkt het als de "Open in achtergrond" -animatie in Safari (iPhone). Mijn antwoord beschrijft die animatie.


Zo'n paar maanden geleden schreef ik zoiets en veel ervan is uitvoerbaar, terwijl een deel ervan dat niet is. Uw vragen hebben me laten zien dat meer mensen moeten weten hoe het wordt gedaan. Ik heb er een blogpost over geschreven . Ik zal de aanpak en uitdagingen op hoog niveau hier beschrijven, maar je kunt er meer over lezen in die post.


Kennismaken met inhoud om te animeren

If you choose to animate the view that is on screen down to the (in your case) tool bar then you will only have to access its layer. If you want the original view to remain and animate a visual copy (like the "open in background"-Safari animation) down to the bar item then you should create a new layer and draw the content of your layer into an image and set that image as the content of the layer that you are animating

De eindpositie berekenen

The start position of the animation is simply the frame of the view. The end position is very tricky since bar items (both tool bar items and tab bar items) are not UIView subclasses and doesn't have a public view property. This causes problems when you want to shake the bar item later on.

Ik besloot een visuele benadering te maken van de eindpositie met behulp van enkele eenvoudige heuristieken. Als je van te voren weet dat je alleen naar een enkel staafitem beweegt, kan de eindpositie in een geschikt frame worden gecodeerd.

Animeren langs een pad

There is nothing special to moving, scaling and rotating the layer from the start to the end position. If you want to read more about how I did it you can look at the post I wrote.

Het staafitem schudden

This cannot be done without a lot of custom code or using private API at the moment. Since bar items doesn't have a view or a layer there is no accessible layer for you to animate. I guess that you could have a custom animating image that does the shake and set that during the animation and set the new image afterwards. The approach of drawing into an image and animating that doesn't work that well either since there is no accessible layer who can draw its content into the image (you want this for the special effect of the tool bar item and tab bar item).

... stop dit allemaal in elkaar en stem het af op uw speciale behoeften en u zult een animatie hebben die lijkt op de animatie die u zoekt.

0
toegevoegd