IOS Core Animation in detail (iv) animations in AutoLayout
Last Update:2015-08-06
Source: Internet
Author: User
<span id="Label3"></p><p><p>Original blog, reproduced please indicate the source<br>Blog.csdn.net/hello_hwc<br>Welcome to my iOS SDK detailed column<br>Http://blog.csdn.net/column/details/huangwenchen-ios-sdk.html</p></p> <blockquote> <blockquote> <p>Preface: AutoLayout defines the location of the view, that is, in the project of Auto layout, If the constraint itself is not modified, it will return to the first position when the view is Redrawn. The animations in AutoLayout are related to the position and size of the VIEW.</p> </blockquote> </blockquote>First look at the effect<p><p></p></p>Implementation process<p><p>Drag a uiimageview on the Storyboard. Set constraint to: Horizontal vertical center, The size is fixed 100*100<br></p></p><p><p>Drag imageview and constraint for outlet</p></p><p><p>Notice the drag of the y-related constraint, which is the</p></p><p><p><br>corresponding Code</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs vala"><span class="hljs-keyword">weak</span><span class="hljs-keyword">var</span><span class="hljs-keyword">weak</span><span class="hljs-keyword">var</span> yConstraints: NSLayoutConstraint!</code></pre></pre><p><p>Set the initial state of ImageView in Viewdidload</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm"> yConstraints<span class="hljs-preprocessor">.constant</span> = yConstraints<span class="hljs-preprocessor">.constant</span> - CGRectGetHeight(UIScreen<span class="hljs-preprocessor">.mainScreen</span>()<span class="hljs-preprocessor">.bounds</span>)/<span class="hljs-number">2</span> self<span class="hljs-preprocessor">.imageview</span><span class="hljs-preprocessor">.alpha</span><span class="hljs-number">0.0</span><span class="hljs-comment">;</span> self<span class="hljs-preprocessor">.imageview</span><span class="hljs-preprocessor">.transform</span> = CGAffineTransformMakeScale(<span class="hljs-number">0.1</span><span class="hljs-number">0.1</span>) self<span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.layoutIfNeeded</span>()<span class="hljs-comment">;</span></code></pre></pre><p><p>Creating animations in Viewwillappear</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm"> yConstraints<span class="hljs-preprocessor">.constant</span> = yConstraints<span class="hljs-preprocessor">.constant</span> + CGRectGetHeight(UIScreen<span class="hljs-preprocessor">.mainScreen</span>()<span class="hljs-preprocessor">.bounds</span>)/<span class="hljs-number">2</span> UIView<span class="hljs-preprocessor">.animateWithDuration</span>(<span class="hljs-number">1.0</span><span class="hljs-keyword">in</span> self<span class="hljs-preprocessor">.imageview</span><span class="hljs-preprocessor">.alpha</span><span class="hljs-number">1.0</span> self<span class="hljs-preprocessor">.imageview</span><span class="hljs-preprocessor">.transform</span> = CGAffineTransformIdentity self<span class="hljs-preprocessor">.view</span><span class="hljs-preprocessor">.layoutIfNeeded</span>() })</code></pre></pre>Principle <blockquote> <blockquote> <blockquote> <p>The principle is simple, is to use the modified constraint Nslayoutconstraint attribute constant, and then call <code>layoutIfNeeded</code> to implement the Animation. Note that the property <code>multiplier</code> currently (iOS 8.4) is still read-only and cannot be modified. however, you can <code>view1.property = view2.property * multiplier + constant</code> convert through relationships.</p> </blockquote> </blockquote> </blockquote>AutoLayout Animations with pure code<p><p>The above animations are implemented with pure code</p></p><pre class="prettyprint"><code class=" hljs avrasm">Class Viewcontroller:uiviewcontroller {var imageview:uiimageview? Weak Var yconstraint:nslayoutconstraint? Override func Viewdidload () {super<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Viewdidload</span></span>()//add ImageView Let image = UIImage (named:<span class="hljs-string"><span class="hljs-string">"1_hello_hwc.jpg"</span></span>) ImageView = Uiimageview (image:image) Self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>?<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Settranslatesautoresizingmaskintoconstraints</span></span>(false) Self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. View</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Addsubview</span></span>(self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>!) Create a constraint that defines the starting position let HC = Nslayoutconstraint (item:self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. View</span></span>, Attribute:nslayoutattribute<span class="hljs-preprocessor"><span class="hljs-preprocessor">. CenterX</span></span>, relatedby:nslayoutrelation<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Equal</span></span>, toitem:self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>, Attribute:nslayoutattribute<span class="hljs-preprocessor"><span class="hljs-preprocessor">. CenterX</span></span>, Multiplier:<span class="hljs-number"><span class="hljs-number">1.0</span></span>, constant:<span class="hljs-number"><span class="hljs-number">0.0</span></span>) Let VC = Nslayoutconstraint (item:self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. View</span></span>, Attribute:nslayoutattribute<span class="hljs-preprocessor"><span class="hljs-preprocessor">. CenterY</span></span>, relatedby:nslayoutrelation<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Equal</span></span>, toitem:self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>, Attribute:nslayoutattribute<span class="hljs-preprocessor"><span class="hljs-preprocessor">. CenterY</span></span>, Multiplier:<span class="hljs-number"><span class="hljs-number">1.0</span></span>, constant:<span class="hljs-number"><span class="hljs-number">0.0</span></span>) Yconstraint = VC<span class="hljs-comment"><span class="hljs-comment">;</span></span>yconstraint!<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Constant</span></span>= yconstraint!<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Constant</span></span>-cgrectgetheight (uiscreen<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Mainscreen</span></span>()<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Bounds</span></span>)/<span class="hljs-number"><span class="hljs-number">2</span></span>Let widthc = Nslayoutconstraint (item:self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>!, Attribute:nslayoutattribute<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Width</span></span>, relatedby:nslayoutrelation<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Equal</span></span>, toitem:nil, Attribute:nslayoutattribute<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Notanattribute</span></span>, Multiplier:<span class="hljs-number"><span class="hljs-number">1.0</span></span>, constant:<span class="hljs-number"><span class="hljs-number"></span> -</span>) Let Widthh = Nslayoutconstraint (item:self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>!, Attribute:nslayoutattribute<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Height</span></span>, relatedby:nslayoutrelation<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Equal</span></span>, toitem:nil, Attribute:nslayoutattribute<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Notanattribute</span></span>, Multiplier:<span class="hljs-number"><span class="hljs-number">1.0</span></span>, constant:<span class="hljs-number"><span class="hljs-number"></span> -</span>) Self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. View</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Addconstraints</span></span>([hc,vc,widthc,widthh])//define the starting state of self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>?<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Alpha</span></span>=<span class="hljs-number"><span class="hljs-number">0.0</span></span><span class="hljs-comment"><span class="hljs-comment">;</span></span>Self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>?<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Transform</span></span>= Cgaffinetransformmakescale (<span class="hljs-number"><span class="hljs-number">0.1</span></span>,<span class="hljs-number"><span class="hljs-number">0.1</span></span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. View</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. layoutifneeded</span></span>()} override func viewwillappear (animated:bool) {yconstraint!<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Constant</span></span>= yconstraint!<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Constant</span></span>+ Cgrectgetheight (uiscreen<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Mainscreen</span></span>()<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Bounds</span></span>)/<span class="hljs-number"><span class="hljs-number">2</span></span>UIView<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Animatewithduration</span></span>(<span class="hljs-number"><span class="hljs-number">1.0</span></span>, Animations: {(), Void<span class="hljs-keyword"><span class="hljs-keyword">inch</span></span>Self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>!<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Alpha</span></span>=<span class="hljs-number"><span class="hljs-number">1.0</span></span>Self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ImageView</span></span>!<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Transform</span></span>= Cgaffinetransformidentity Self<span class="hljs-preprocessor"><span class="hljs-preprocessor">. View</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. layoutifneeded</span></span>() }) }}</code></pre>Positioning constraints<p><p>Set Property identifier</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm">yConstraint<span class="hljs-preprocessor">.identifier</span><span class="hljs-string">"identifier"</span></code></pre></pre><p><p>Then in the filter, define to this constraints,</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs coffeescript"><span class="hljs-reserved">let</span> constraint = filter<span class="hljs-function"><span class="hljs-params">(self.view.constraints() as! [NSLayoutConstraint], { (constraint:NSLayoutConstraint) -> Bool <span class="hljs-keyword">in</span> <span class="hljs-keyword">return</span> constraint.identifier == <span class="hljs-string">"identifier"</span> })</span>.<span class="hljs-title">first</span></span></code></pre></pre> <p style="font-size:12px;"><p style="font-size:12px;">Copyright Notice: This article is for bloggers original article, If you need to reprint please indicate the source</p></p> <p><p>IOS Core Animation in detail (iv) animations in AutoLayout</p></p></span>
