网络编程

当前位置:永利402游戏网站-永利402com官方网站 > 网络编程 > Swift-粉碎动画效果

Swift-粉碎动画效果

来源:http://www.xtcsyb.com 作者:永利402游戏网站-永利402com官方网站 时间:2019-09-15 03:17

图片 1Swift-粉碎动画效果.gif

*正文小说权归饥人谷_CJ和饥人谷全体,转载请申明出处*

先上一张GIF图片

主题材料1:怎样剖断三个因素是还是不是现身在窗口可视范围(浏览器的上面缘和上边缘之间,肉眼可视)。写一个函数 isVisible实现

function isVisible($node) {
  var nodeOffsetTop = $node.offset().top;
  var nodeHeight = $node.outerHeight();
  var windowScrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();

  if (nodeOffsetTop - windowHeight < windowScrollTop && windowScrollTop < nodeOffsetTop + nodeHeight) {
    return true;
  } else {
    return false;
  }
}

。。。图片是或不是有的大啊?

难点2:当窗口滚动时,判定三个因素是或不是出新在窗口可视范围。每便出现都在调控台打字与印刷 true 。用代码完毕

var $div = $('div');
function isVisible($node) {
  var nodeOffsetTop = $node.offset().top;
  var nodeHeight = $node.outerHeight();
  var windowScrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();

  if (nodeOffsetTop - windowHeight < windowScrollTop && windowScrollTop < nodeOffsetTop + nodeHeight) {
    return true;
  } else {
    return false;
  }
}
$(window).scroll(function() {
  console.log(isVisible($div));
});

Demo

永不在意那一个细节啦,上教学。

难题3:当窗口滚动时,判定叁个因素是还是不是出现在窗口可视范围。在要素第一遍出现时在调控台打印 true,将来重现不做任何管理。用代码达成

var shownNodesList = [];                      // 新建数组用于储存已经出现过的元素
function isShown($node) {                     // 新建函数用于判断是否已经出现过
  return shownNodesList.indexOf($node) > -1;
}

var $div = $('div');
function isVisible($node) {
  var nodeOffsetTop = $node.offset().top;
  var nodeHeight = $node.outerHeight();
  var windowScrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();

  if (nodeOffsetTop - windowHeight < windowScrollTop && windowScrollTop < nodeOffsetTop + nodeHeight) {
    return true;
  } else {
    return false;
  }
}

$(window).scroll(function() {
  if (isVisible($div) && !isShown($div)) {    // 如果元素可见且没出现过
    console.log(true);                        // 打印
    shownNodesList.push($div);                // 放入已出现元素数组中
  }
});

Demo

抑或老套路,首先将自身德姆o中的Smash文件夹拖入你的工程中,然后就足以调用了。

标题4: 图片懒加载的原理是什么?

  1. 先将图片统一用一样的占位图 UOdysseyL,每张图片真实的 UF12berlinettaL 储存在个其他自定义属性中
  2. 检验图片是或不是出现在视口中
  3. 把出今后视口中的图片的 U奥迪Q3L 替换为积攒在自定义属性中的 UEscortL

如此能够削减同临时候内的 URL 央浼,提升页面品质

//// ViewController.swift// Swift-粉碎动画效果//// Created by ibokan on 16/7/22.// Copyright © 2016年 张宇. All rights reserved.//import UIKitclass ViewController: UIViewController { @IBOutlet var img1: UIImageView! @IBOutlet var img2: UIImageView! @IBOutlet var img3: UIImageView! @IBOutlet var img4: UIImageView! @IBOutlet var img5: UIImageView! /*点我粉碎按钮*/ @IBAction func button(sender: UIButton) { delay(0, task: {self.img1.boom delay(1, task: {self.img2.boom delay(2, task: {self.img3.boom delay(3, task: {self.img4.boom delay(4, task: {self.img5.boom } /*点我重置按钮*/ @IBAction func button2(sender: UIButton) { img1.reset() img2.reset() img3.reset() img4.reset() img5.reset() } override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } typealias Task = (cancel : Bool) -> () func delay(time:NSTimeInterval, task: -> Task? { func dispatch_later-> { dispatch_after( dispatch_time( DISPATCH_TIME_NOW, Int64(time * Double(NSEC_PER_SEC))), dispatch_get_main_queue } var closure: dispatch_block_t? = task var result: Task? let delayedClosure: Task = { cancel in if let internalClosure = closure { if (cancel == false) { dispatch_async(dispatch_get_main_queue(), internalClosure); } } closure = nil result = nil } result = delayedClosure dispatch_later { if let delayedClosure = result { delayedClosure(cancel: false) } } return result; } func cancel(task:Task?) { task?(cancel: true) }}

主题素材5: 完结录制中的图片懒加载效果

Demo

是还是不是异常粗略!Demo地址

难题6: 达成摄像中的信息懒加载效果

图片 2

lazyNews.gif

代码地址

本文由永利402游戏网站-永利402com官方网站发布于网络编程,转载请注明出处:Swift-粉碎动画效果

关键词:

上一篇:没有了

下一篇:没有了