在这里您可以留下任何想说的话。

同时,您也可以单击进入每一篇文章进行留言。

来吧,让我们一同成长……

 想说点什么吗?


 (若评论发表后未显示请耐心等待审核)

左半红印发表于2008.11.21st

这里所展示的是我近期很喜欢的B站视频,可以通过提交BV号变更视频

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

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

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

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

  • 'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中,并且窗口没有最小化.
  • 'hidden‘ : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 ‘锁屏状态’ .
  • 'prerender' : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始,永远不能从其他值变为此状态.注意: 浏览器支持是可选的.

通过以上学习,我们来整理一下解决思路。首先当页面第一次打开后,先需要动画函数运行一遍,然后进行循环运行。随后进行网页可视状态监听,在切换网页时,要做以下事情,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);
        }
    });
左半红印发表于2021.04.5th

分两种说明吧,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时间上的调整,就可以得到下面这种效果

CSS3边框

进阶版

基础版是相对简单的操作,极少代码编写就可以实现。但是这样的效果可能是你无法满意的,我们需要更加炫酷的效果,比如边框的渐变效果。那么这里就又出了问题,正如和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作为举例,具体样式情况各位需要根据自己的需求进行编写。同时也贴出加了渐变特效后的边框动画作为对比。

jquery边框
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这个方法,用起来很不靠谱。实际上如用户切换网页的话,这个动画会出现问题。不过这个不是现在可以解决的问题了,以后再说。

左半红印发表于2021.04.4th

最近的国产之光之一,类似《异星工厂》的玩法,采集资源铺设生产线生产多级产品并最终达成目标。只不过现在的目标是建立戴森球。

《戴森球计划》

先说毛病吧,这个很重要。虽然游戏还处在EA阶段,但是有个非常明显的问题是游戏引导做的非常糟糕。如果不是老手,很可能劝退。游戏仅靠着标题写着戴森球然后把你扔在一颗卫星上就几乎没有然后了。几段简单至极的教程,告诉你基本操作之后。留给你的就是整个空空如也的星球和一堆扑面而来的待升级科技和研究。玩家最开始完全不知道为什么要建造那些建筑物,为什么要生产那些零件,为什么要继续研究升级。所有目标都只有一个遥远的戴森球。而这个目标很可能是你未来100个小时内都无法达成的终极目标。这是一个明显被忽略了的地方,制作组过于追求核心玩法而忽略了游戏的完整性,就像苍天大树枝干健壮却缺少树叶一样。相信任何玩过类似经营类游戏的玩家都曾经体会到过,一个好的引导是如何将一个庞大的系统逐步介绍给玩家。而不是上来就将海量信息直接堆在玩家面前。

不过好歹我熬过来了。游戏时间接近100小时,听网上有人说差不多60个小时就能搭好一个球,觉得纯属扯淡。目前正处于游戏的最后阶段,搭建最后的戴森球壳。游戏设计上一些供需关系的冲突设计的还是不错,造成了游戏过程中的一系列需要玩家解决的问题。而和电力的争斗也整整经历了游戏的前半部分。可以说在玩法设计上,这些内容是令人满意的。

最后说说情怀的问题。前苏联科学家戴森自己可能都没想象到,当时他如此严肃的提出的这个科学概念,如今已经成了各种宇宙科幻娱乐产品热衷的题材。因其拥有庞大的体积而存在于太空之中从而具备了非常明显的浪漫情怀。在实际游戏中,当你的戴森球搭建到一定程度之后,无论是你从行星或者卫星的角度上看着这个庞大的物体还是当你飞到戴森球附近,你都会赞叹其恢弘程度。

左半红印发表于2021.02.15th

最后一天了,今天就是游览一下这个城市吧。首先说一下,厦门植物园后面的国防园和花奔园真的是又远又没什么看的。因为季节问题,现在也没什么花。南普陀寺也比较小,里面的石刻竟然还有美国海军的,真是丢人丢到家了。世贸大厦顶层的风景不错,虽然是阴天,景色依然不错。曾安厝的感觉就像一个大片的成都锦里或者武汉的乌衣巷,小吃小喝小玩意遍布其中。亏我们前两天还一直在找当地闽菜馆,这里全都是。整个城市最后一天给我的印象改观了很多,刚下飞机的时候,怎么看都觉得这里只是一个欠发达的海边城市,楼不少但都不高,晚上也没多少亮灯。但今天一天下来,发现作为一个海边旅游城市,厦门的打造还是不错的,整体度假风格的城市打造还可以。虽然距离国际上一线的度假城市还有一段距离,但能看出来已经初具规模。无论如何,这次旅游的感受还是不错的,向所有还没有来过厦门的人推荐这里。

左半红印发表于2021.01.5th

鼓浪屿,基本上算是厦门最重要的游览景点了。一个不大的离岛,曾经是包括日本、德国、英国等等东西方列强的使领馆所在地。也正因为曾经大量外国人在这里居住,导致整个海岛的建筑风格充满了西方和中西合并,这也是鼓浪屿最吸引人的地方。

刚上岛,一股不同于厦门的热带风情迎面而来。再加上满眼的欧式风格建筑物,要不是随处可见的中文和身边的大量游客,我甚至以为出国了。在岛上的时候,我一直都在想怎么能用一句话来描述这个岛屿的感觉呢。一个神奇的小区,一个无论现在全国哪个仿欧式的居民区再仿也无法达到的小区。那种沉重的味道,民国、清明甚至更早时期建筑的味道确实令人沉醉。

左半红印发表于2021.01.4th

福建土楼群,久闻大名。一天下来着实令人印象深刻。来回5个多小时的路程感觉值了。实际上在快到风景区的路上就已经可以在车上看见一座座的土楼,不过可能是因为今天的天气过于的好。那种印象中的土楼的感觉还是少了点。而到了风景区后,从外面看,土楼给我的感觉也就那么回事。一个巨大的圆形或者方形结构的建筑物而已,但是,当我一进入土楼。呜哇,那种感觉扑面而来。没错了,就是内味儿。无论是在游戏中进入土楼后的那种感觉还是动画电影中的那种感觉,体现的淋漓尽致。一个词描述,恍如隔世。这地方简直太棒了。在游览中,我无数次的想象着生活在土楼中的人们的生活是怎样的,尽管可能有各种不方便,但是那种世外桃源的感受确实是在城市中生活的人们所无法体会的。

左半红印发表于2021.01.3rd