GitHub also saw a good animation (https://github.com/rounak/RJImageLoader), so I would like to realize the following do not know, this animation is not really look so simple, I think for a half day Leng didn't do it, Finally read the author's code, just know how to achieve. But also from the author where to learn a trick, is the use of layer.mask. Your own implementation of the effect of the demo here: Https://github.com/Phelthas/LXMRevealDemo (front of the Circle animation, which is a cashaperlayer to modify its strokeend animation, relatively simple, No more writing) This animation is not difficult to say, its key lies in the use of layer.mask characteristics, if you do not know the characteristics of layer.mask, it is very difficult to achieve, on the contrary, if you know, then the idea is enlightened. The key is this:/ * A layer whose alpha channel is used as A mask to select between the* layer ' s background and the result of compositing the layer ' s
* Contents with its filtered background. Defaults to nil. When used as
* A mask the layer ' s ' compositingfilter ' and ' backgroundfilters '
* properties are ignored. When setting the mask to a new layer, the
* New layer must has a nil superlayer, otherwise the behavior is
* undefined. Nested Masks (mask layers with their own masks) is* Unsupported. * *@property (strong) Calayer *mask; Mask property, you can implement many shapes of masks, the basic effect is:For example Layera is Layerb mask, that is layerb.mask = Layera;Then the transparent part of the Layera will be painted white to block the Layerb (seemingly white, do not know can be made into other colors), Layera on the opaque part, will be drawn to transparent, showing the contents of Layerb. Note: The layer as mask cannot have superlayer or sublayer! Knowing this, the idea of animation has:There is a mask on the ImageView, the transparent part of the mask becomes larger and expands outward, so that the image behind the mask explodes. First, a circular cashapelayer is required, and two animations are needed to make the layer extend inward and outward at the same time. So the question comes, only a layer, can not have sublayer, how to make it at the same time to become big and smaller? The answer is: a different way. Note that Cashapelayer is a line drawing, the line is also color, and the width is linewidth, and these properties can be animated. So the Final solution is:Set the Circle Line color is transparent, the round fill color is opaque, the color outside the park is opaque (here the setting refers to the effect of seeing), so that the circle gradually become large to show the entire view, while the circle LineWidth gradually widened to the radius of the circle so large. The effect is that the image is gradually revealed as the effect above. The core animation code is as follows:-(void) reveal {
Self.backgroundcolor = [Uicolor Clearcolor];
[Self.circlelayer removefromsuperlayer];//in theory as a mask layer can not have a parent layer, so remove
Self.superview.layer.mask = Self.circlelayer;
Make the circle bigger animation
Cabasicanimation *pathanimation = [cabasicanimation animationwithkeypath:@ "path"];
Uibezierpath *topath = [self pathWithDiameter:self.bigDiameter];
Uibezierpath *topath = [self pathwithdiameter:0];//to reduce the animation of the current path
Pathanimation.tovalue = (id) topath.cgpath;
Pathanimation.duration = 1.0;
An animation that makes the width of a circular line larger, and the effect is that the inner circle becomes smaller
Cabasicanimation *linewidthanimation = [Cabasicanimation animationwithkeypath:nsstringfromselector (@selector ( LineWidth)];
Linewidthanimation.tovalue = @ (self.bigdiameter);
Linewidthanimation.duration = 1.0;
Caanimationgroup *group = [Caanimationgroup animation];
Group.animations = @[pathanimation, linewidthanimation];
Group.duration = 1.0;
Group.removedoncompletion = no;//The effect of this sentence is that the animation will not return to the same place after the end, must add
Group.fillmode = kcafillmodeforwards;//The effect of this sentence is that the animation will not return to the same place after the end, must add
Group.delegate = self;
[Self.circlelayer addanimation:group forkey:@ "Revealanimation"];} /**
* Create a circle path based on the diameter, note that the dot is the center point of self, so (x, y) is not (0,0)
*/
-(Uibezierpath *) Pathwithdiameter: (cgfloat) diameter {
return [Uibezierpath Bezierpathwithovalinrect:cgrectmake ((Cgrectgetwidth (self.bounds)-diameter)/2, ( Cgrectgetheight (self.bounds)-diameter)/2, diameter, diameter)];
}
#pragma mark-caanimationdelegate
-(void) Animationdidstop: (Caanimation *) Anim finished: (BOOL) Flag {
Self.superview.layer.mask = nil;
[Self removefromsuperview];
}
#pragma mark-property
-(Cashapelayer *) Circlelayer {
if (!_circlelayer) {
_circlelayer = [Cashapelayer layer];
_circlelayer.fillcolor = [Uicolor Clearcolor]. cgcolor;//this must be transparent, because the inner circle is opaque.
_circlelayer.strokecolor = [Uicolor Yellowcolor]. cgcolor;//Note that this must not be transparent, because it actually shows the picture behind it.
_circlelayer.path = [self pathWithDiameter:self.smallDiameter]. Cgpath;
}
return _circlelayer;} Full code See what's wrong with Github:https://github.com/phelthas/lxmrevealdemo welcome criticism
Using the Mask property of layer to realize the animation effect of gradually revealing
