吉卜力这个名字曾经伴随着我的青春，曾经一度代表着日本动漫与美国的迪士尼分庭抗争。其急剧特点的2D画面可谓独树一帜。这导致经历过那个年代的人，无论你是否喜欢动漫，宫崎骏这个名字你一定听过。可以算是那个时代的一面旗帜，而现在看来也算是那个时代的流到现在的眼泪了。于是在某个晚上，在我漫无目的的翻着网络上的动画时，突然看到了吉卜力的某部作品，让我一时突然想起来，似乎……好久都没有看过吉卜力的动画了。

1985年6月15日吉卜力正式成立，有意思的是吉卜力真正意义上的第一部动画是在吉卜力还没有成立的时候就已经制作完毕并上映的《风之谷的娜乌西卡》。而在吉卜力成立之后的第一部动画则是1986年上映的《天空之城》。到了1988年，吉卜力的标志性动画《龙猫》上映，至此吉卜力的logo也算是确认了。可以说吉卜力最早期的作品大都是幻想风格，这也是我最喜欢的吉卜力风格。而随着不如90年代，吉卜力的动画故事逐渐转向现实。动画做要表达的内涵也逐渐从人与自然的相处，反战过渡到人自身的成长，人对经历的反思等等。这种转变并不是从某个作品作为里程碑开始，而是慢慢的在一个个作品中发生。很遗憾，这段时间的吉卜力的动画我并不喜欢。

到90年代末在迈入千禧年的时候，吉卜力似乎又找到了当年那种敢于幻想的感觉。从97年的《幽灵公主》到2001年获得奥斯卡奖的《千与千寻的神隐》，开启了吉卜力如日中天的时代。再往后，吉卜力似乎对改编奇幻小说到动画感兴趣。说到这里，不得不提到在2004年宫崎骏制作了《哈尔的移动城堡》恰巧也是吉卜力成立了接近20个年头。这家工作室后继无人的情况已经非常突出。宫崎骏并没有做好培养未来接班人的工作，他的儿子宫崎吾朗在后面的表现其实或多或少都有点差强人意。

可以这么说在2004年以后，吉卜力算是进入了后宫崎骏时代，随着老爷子隐退了又复出，复出了又隐退。总也放不下，又无力拿起来，又找不到合适的人拿起来。在一众动画中，我个人比较喜欢的只有《借东西的小人阿莉埃蒂》。其实也就在这个时间点，我们可以发现时代更替的车轮已经开始运行，动画制作方式的变革让这个老年人工作室需要吃力的适应。而到了2012年，可以算是宫崎骏最富争议的动画《起风了》上映了。我到现在都很难理解为什么宫崎骏又复出后会制作这么一部动画。我不是日本人我发理解零式战机对日本人的意义，但吉卜力之前所热衷的反战的表达在这部动画下显得极其可笑。可能是老爷子觉得日本人会比较喜欢看这个吧。

在2014年吉卜力制作完《回忆中的玛妮》后，正式宣布停止动画制作，而只维持版权管理方面事务。至此这一颗时代的眼泪终于流了下来。但还没完！想必是宫崎骏老爷子身体依然康健，在接下来的几年间吉卜力依然有少量的动画制作。但想要重振往日的辉煌似乎已经不大可能。在2020年，吉卜力公布了宫崎吾朗以CG制作、内容改自戴安娜·温尼·琼斯著作《Earwig and the Witch》的电视动画《安雅与魔女》。CG啊，好家伙……要知道迪士尼的第一部3D动画是可是1995年的《玩具总动员》。宫崎骏似乎代表着老一代日本的人所谓“工匠”精神，不断精益求精逼迫自己的全部潜力做好手头的工作。这是否真的对呢？在面对时代发展的巨大齿轮，一直固守的传统是不是早就应该变革了呢。亦或者满怀着信仰与尊敬坦然的成为历史长河中的水滴呢。无论如何，感谢吉卜力在曾经的那个年代为我的童年带来了无数的快乐。

爱死机第一季的表现令人惊艳，虽然是个短篇集，但很其中多部看下来让会人呜哇哦。所以第一季评价之高也是合情合理，然后完全意料之中的第二季来临了。

但是吧，一口气看完之后，感觉不太对。一共8集，各自独立的动画，其中恐怖片的比重是不是太重了？！其中部分动画使用的CG技术确实牛批，但动画除了看技术以外，故事本身也很重要。在短时间内用一流的CG技术展现一个短小精悍的故事才是这一类短片动画的意义。结果呢？除了少数动画在表现一些内涵以外，大部分都是单纯的写了一个可有可无的故事。

其中最令人不满的是一部关于圣诞节的动画，描绘了一个极其恶心的怪兽当做圣诞老人给孩子们送礼物。故事结尾孩子自我反思，如果我不是好孩子是不是就会被怪物吃掉。What the fuck？！这是哪个神经病想出来的故事。

不满归不满，其中还是有一些动画表现不错的，特别要夸夸其中的《ICE》和《Pop Squad》相当不错。出于剧透问题，我不在这里谈论剧情内容。只是这种既有内容又有外表的短片动画是真的难得。如果各位有机会，一定要看看。

关于这个游戏，我曾经谈过一次，建议没看过的朋友先看一下上次玩的感受。

随着前段时间这款游戏转为正式版本，游戏内容扩充至完整的5个章节。令人高兴的是，制作组有听到玩家社群的反馈并做出了调整。也正如我上篇文章所提到的，游戏玩法在当时有点过于单调。当时游戏只放出了前三章，相比之下这次我玩完了后面两章，发现制作组在玩法上面增加了很多。特别亮点的在于第四章的直播间攻略和第五章的寻找炸弹。能在基础玩法上拓展出来确实不易，给玩家的感受也很好。说到这里，让我想起了《Hacknet》DLC的破解播音747航班的最终任务，让人惊艳。

到目前为止，《全网公敌》算是一个相当完整，内容丰富的游戏了。国产游戏在这方面的发展令人兴奋，全部玩下来。虽然稍有微词，但瑕不掩瑜，期待制作组后面的DLC以及后续作品。游戏的章节过度特别类似《逆转裁判》，给我的感受很好，因为是首次做这类游戏所以也不能给太高要求。但期待在以后的类似游戏中能够进一步丰富这个过场。

《家园3》最近进行了一次开发日志更新，因为这次更新附加了一个视频，导致很多玩家看了过后都有一些不满。特别是国内玩家，这里的原因主要是国内媒体在转载的时候仅仅单独把视频搬了过来而没有转载日志的相关内容，这导致了玩家产生了误解，所以我用这篇文章来说明一下。

首先我们也先来看一下这个视频

OK，一般玩家看过这视频后都有两个疑惑，这电磁炮在开火的时候也抖动的太跨装了，还有一个问题就是这个护卫舰好丑。没错，确实如此。我本人在看过之后也有这个疑惑，所以去看了下原帖。这才发现，原贴是其实是在向玩家介绍制作组在开发家园3的新单位是一个怎样的过程，而这个视频却刚刚好是在整个日志最开始的部分，后面还有大段的介绍。那么我们先说一下电磁跑抖动的问题，在原帖中在这个视频下方有这样一段补充。

Edit: “I’m absolutely humbled by the excitement from all the fans on the teams work. You are truly passionate bunch that love and understand the franchise. Here are a few things to get out of the way.  The railgun frigate does not replace the ion frigate, stay tuned that will still come into play. Keep in mind these are all early work in progress work and we read all your feedback. We totally agree and will be removing the shaking rails when the unit is winding up. “- Karl Gryc

上面这段文字中提到两个事情，第一电磁跑护卫舰是不会取代离子炮护卫舰的，第二个就是所有人都同意取消开炮的抖动效果将。

然后是第二个问题，正如上面所说的这次开发日志，是在向玩家介绍这个新单位是如何被创造的，所以在外形部分日志也用了大量篇幅在介绍电磁跑护卫舰的外形演变。

从上面的图片可以明显看到外形的迭代，原帖中有更为详细的介绍，而目前迭代到的效果是这样的。

好吧，说实话吧，我是觉得第二个造型更好看啦。

承接上一篇日志，当我们在使用setInterval来循环js方法时，会遇到一个bug。就是当用户切换网页后，再切换回来后会发现当前循环运行的js出现问题，比如动画速度发生变化或者动画卡住等。本篇日志就是来解决这个问题。

解决的思路首先是引入visibility，为网页添加这个事件的监听，就能知道网页是什么时候被切换或者正在看。mozilla的举例代码如下

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

从上面的代码可以看出，先要添加visibilitychange事件监听，再通过visibilityState的值来判断当前网页的可视状态，visibilityState的状态包括以下

通过以上学习，我们来整理一下解决思路。首先当页面第一次打开后，先需要动画函数运行一遍，然后进行循环运行。随后进行网页可视状态监听，在切换网页时，要做以下事情，1、停止循环；2、所有动画停止；3、所有动画元素回到初始状态。在网页回到可视状态时，继续执行循环函数并重新启动循环。在下面代码中的border_loop()就是动画方法，也是上一篇日志中编写的动画方法。利用定义border_loop_start来控制setInterval启停。.border_top到.border_left都是动画涉及到的具体元素，用来控制动画停止和回到原来位置。

    border_loop();
    let border_loop_start = setInterval(border_loop,3300);
    document.addEventListener("visibilitychange",function () {
        if (document.visibilityState == 'hidden'){
            clearInterval(border_loop_start);
            $('.border_top').stop(true,true);
            $('.border_right').stop(true,true);
            $('.border_bottom').stop(true,true);
            $('.border_left').stop(true,true);
            $('.border_top').css({
                right: '100%',
                left: '-100px'
            });
            $('.border_left').css({
                top: '100%',
                bottom: '-40px'
            });
            $('.border_right').css({
                top: '-40px',
                bottom: '100%'
            });
            $('.border_bottom').css({
                right: '-100px',
                left: '100%'
            });
        }
        else {
            border_loop();
            border_loop_start = setInterval(border_loop,3300);
        }
    });

分两种说明吧，CSS3的相对简单作为基础版，而Jquery的作为进阶版，当然进阶版的效果要更好一点。具体样式看首页的“展开网页”按钮。先说基础版吧。

基础版

也是从网上进行学习后的成果，学习代码来自：

https://github.com/code-fx/Pure-CSS3-Animated-Border

这里涉及一个CSS的基础知识，即当表层div的position为relative，里层div的position为absolute时，里层div和表层div是重复叠加在一起的。而当我们把里层div或者span的位置css（包括top,bottom,left,right）都设置成0时，里层和表层完全重叠。不仅如此，里层div可以是多个，只要position都设置为absolute就全部和表层重叠。

这时我们会发现一个情况，就是里层的div或者span其实可以用伪类来替换，这样代码更简单。

.div{
  position: relative;
}
.div:before, .div:after{
  content: '';
  position: absolute;
}

这样之后我们可以单独设置伪类的边框border和位置，再利用transition或者animation来使其运动。比如：

.div:before {
    border-top: 2px solid #00ff00;
    transition-property: all;
    transition-timing-function: linear;
    transition-duration: 2s;
    transition-delay: 0s;
    animation: border_top 2s infinite linear;
}

@keyframes border_top {
    0%{
        top: 0px;
        bottom: 0px;
        left: 0;
        right: 178px;
    }
    100%{
        top: 0px;
        bottom: 0px;
        left: 178px;
        right: 0;
    }
}

这样就可以利用div的before伪类，创建并移动了上边框border-top。animation的infinite属性是循环动画，你可以更改为其他需要的样式，比如加个:hover来达到鼠标覆盖动画的效果等等。当然我们很容易发现一个伪类只能创建一面边框，这个取决于你需要的样式，我这里需要四面边框都有各自的运动动画。所以很自然可以想到，利用after伪类再创建一面边框。可还剩下两面边框呢？很简单，在div里面套一层span或div即可，这样里层的span或者div又可以在多两个伪类。这样操作后，一个div的四面边框就都有了。做完之后，经过调整，主要是animation时间上的调整，就可以得到下面这种效果

进阶版

基础版是相对简单的操作，极少代码编写就可以实现。但是这样的效果可能是你无法满意的，我们需要更加炫酷的效果，比如边框的渐变效果。那么这里就又出了问题，正如和background-image一样，如果使用border-image的话，animation是同样不会生效的，反正我这里是无法使用。所以需要和我以前的一篇文正提到的方法一样，利用jQuery来达成效果。但是立刻你会发现问题，jQuery无法选择伪类。因为伪类不是DOM元素，所以无法抓取。所以这里排除伪类的编写方式，直接写层进去即可。

<div>
    <span class="border_top"></span>
    <span class="border_right"></span>
    <span class="ui-border-element">
        <a>展开网页</a>
    </span>
    <span class="border_left"></span>
    <span class="border_bottom"></span>
</div>

和上面的操作一样，表层position是relative，里层span的position为absolute。然后给里层span加上CSS3的border-image样式，我这里很简单的使用了linear-gradient的渐变效果。接下来利用jQuery的animate()方法改变其位置即可。这里我贴出本站目前使用的function作为举例，具体样式情况各位需要根据自己的需求进行编写。同时也贴出加了渐变特效后的边框动画作为对比。

function border_loop() {
	$('.border_top').animate({
		right:"0px",
		left:'50px'
	}, 2000, 'linear', function () {
		$('.border_right').animate({
			top:'100%',
			bottom:'-40px'
		},2000,'linear',function () {
			$('.border_right').css({
				top: '-40px',
				bottom: '100%'
			});
		});
		$('.border_top').animate({
			right:"-100px",
			left:'100%'
		},500,'linear',function () {
			$('.border_top').css({
				right: '100%',
				left: '-100px'
			});
		});
	});

	$('.border_bottom').animate({
		right:"50px",
		left:'0px'
	}, 2000, 'linear', function () {
		$('.border_left').animate({
			top:'-40px',
			bottom:'100%'
		},2000,'linear',function () {
			$('.border_left').css({
				top: '100%',
				bottom: '-40px'
			});
		});
		$('.border_bottom').animate({
			right:"100%",
			left:'-100px'
		},500,'linear',function () {
			$('.border_bottom').css({
				right: '-100px',
				left: '100%'
			});
		});
	});
}

直接用setInterval()方法调用循环播放即可，循环的时间根据自己的情况慢慢调，说实话我非常不喜欢setInterval这个方法，用起来很不靠谱。实际上如用户切换网页的话，这个动画会出现问题。不过这个不是现在可以解决的问题了，以后再说。